I have a question , i need something like this
background: -webkit-gradient(linear, left bottom, left top, from(#1e3c84), to(#2a5bd0)) #1CA6D6;
border-radius: 3px;
border-bottom: 3px solid #021748;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-khtml-border-radius: 3px;
-ms-border-radius: 3px;
margin-right: 5px;
But in CSS2 ? to show in IE correctly and other browsers
How i can do that? what is the properties or i can do with image? how? or something similar
very thanks!!
All modern browsers support rounded corners and gradient. The older versions of ie can support these features using scripts like css3pie.
Border radius doesn't work in older browsers... you will have to draw the corners yourself, slice them and then build the div or button yourself :)
http://caniuse.com/#search=border-radius
http://www.search-this.com/2007/02/12/css-liquid-round-corners/
Update
Or use #Sotiris link :)
Related
in Mozilla Firefox 24 i cannot use -moz-border-radius on my CSS style.
i have read from this article, they said
Support for -moz-border-radius* and -moz-box-shadow has been removed. Authors should use unprefixed border-radius or box-shadow instead
but it is for Firefox 13, how about in version 24? anyway, thanks.
Use border-radius: 5px 30px;and box-shadow: 0 1px 4px #222; from now on
My understanding is that you can stack both properties, as long as you put the -moz version first. If a particular version of Firefox doesn't like border-radius, it will fall back to the -moz version. And if a version doesn't like the -moz property, it will be superceded by the second call. (this works with -webkit-border-radius as well)
-moz-border-radius: 10px;
border-radius: 10px;
Check this out
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Browser_compatibility
#box{
border:10px solid #000;
border-radius: 10px 40px 40px 10px;
width: 200px;
height: 100px;
background-color:#ccc;
}
check http://jsfiddle.net/E7kYt/ in your FF
standard border radius for all browsers can be created in border-radius.com
I have been struggling with IE8 issue's and came across this issue of Rounded corners ,
Where all the browsers would accept border-radius except IE8.
font-size: 12px;
margin-left: 7px;
margin-top: -13px;
border-radius: 10px 10px 10px 10px / 5px 10px 5px 10px;
After a long struggle i have resolved this issue,
Downloaded : http://css3pie.com/
Used it in CSS as below:
font-size: 12px;
enter code here
-webkit-border-radius: 5px; /* Chrome */
position: relative;
z-index: 1;
border-radius: 5px; /* CSS3 */
-moz-border-radius: 5px; /* Mozilla */
behavior: url(http://dev.intervalorders.com/pie/PIE.php);
border-radius isn't supported by IE8: http://caniuse.com/#feat=border-radius
Internet explorer does not support border-radius. But you can achieve it by implementing some hacks. Check this link for help.
Why everyone wrote "border-radius isn´t support in IE or in IE8" etc..? IE9 support border-radius and lower version of IE support border-radius with PIE and this theme is about PIE not about default support border-radius in IE8 or older.
And answer on question:
-webkit-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
-moz-border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
border-radius: 6px 6px 6px 6px; // simply "6px" is ok too as in another CSS function
behavior: url(funkce/PIE.php); //change link on your local folder where you have PIE.php (in this file is include PIE.htc that alow you use PIE without change .htacces file. For that you must have PIE.php file and PIE.htc file too.)
I want to add rounded corners to my div in firefox.
Ive tried:
-moz-border-radius: 20px;
and its not working.
Pls, does anyone have any alternative solutions?
Thanks
newer versions of firefox support simply
border-radius: 20px;
Did you try that?
Otherwise I'll need to see some more of your css.
Put all the below three in your css
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
Some older versions use -moz and -webkit , but recent browser releases adopt CSS3 way of styling.
source : http://www.the-art-of-web.com/css/border-radius/
As #vidiya mentioned
always make sure you cover all your basis:
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
i'd suggest looking at LESS or SASS so that you can then use mixins (functions within CSS)
//From LESS
.rounded (#round:"4px") {
-moz-border-radius: #round;
-webkit-border-radius: #round;
border-radius: #round;
}
Is it possible to create such a rounded corner gray layout in css3 which is around the content and right side bar Livesite and image is here
Sorry i m beginner at css3.
.element {
/* set border styling */
border-color: black;
border-style: solid;
border-width: 10px;
/* set border roundness */
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Because border-radius is a CSS3 feature and quite new, the -moz and -webkit versions are recommended to support older browsers.
Simple
.round {border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
Just add this class to whatever you want rounded. You can also change the radius.
For the border border:10px solid #E0DDD7
You can replace the #E0DDD7 with Black, Silver, Blue etc...
If you are looking to just have top rounded corners, You can
.round-top {
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
-moz-border-top-right-radius: 24px;
-moz-border-top-left-radius: 24px;
}
Yes; you can create this with yourself check this:
http://css3generator.com/
Curve border is working on Firefox ,Google Chrome but not working on IE?any idea how to do make it work ?
-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;
Unfortunately IE6-IE8 do not support rounded borders. Instead you would need to use something like CSS3PIE.
IE9 however DOES understand border-radius
Update further to comment that it 'won't work' - here is a quick step-by-step (this is a very simple, high-level sample.
Download CSS3PIE at http://css3pie.com/download-latest
Save the .htc file in the root of your site
Lets say you have a div with the id of foo:
<div id="foo">Hello, I'm rounded</div>
Your CSS for this could be:
#foo { width: 500px; height: 200px; background: blue; -moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ }
You simply need to add one more rule to the bottom of that CSS, as follows behavior: url(/PIE.htc);
This will cause CSS3 to apply your border-radius rules to IE6-8.
It will only work in IE9, and you have to use the CSS3 standard.
Support for "border-radius" in IE
-moz and -webkit won't work in IE ever, since they are for other render engines.
use make a curve border .ping image in photoshop and use it .....because border-radius-bottomleft ,border-radius-bottom right etc not work on ie6-8....only border-radius property work in ....
background-color: #E8EDEF;
border-radius: 10px 10px 10px 10px;
display: block;
margin-left: 78px;
width: 591px;
behavior: url(pie/PIE.htc);
border-radius-bottom right*/ not working in ie6-8