Menu
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .
There is no technical reason not to use the rem unit for border-radius . Neither is never any compelling reason to use the rem unit, for it or otherwise.
Yes! When IE9 is released in Jan 2011.
Let's say you want an even 15px on all four sides:
.myclass {
border-style: solid;
border-width: 2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.
Furthermore: don't forget to declare your IE coding is ie9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.
The answer to this question has changed since it was asked a year ago. (This question is currently one of the top results for Googling "border-radius ie".)
IE9 will support border-radius.
There is a platform preview available which supports border-radius. You will need Windows Vista or Windows 7 to run the preview (and IE9 when it is released).
While you're waiting.. Curved corner (border-radius) cross browser
A workaround and a handy tool:
CSS3Pie uses .htc files and the behavior property to implement CSS3 into IE 6 - 8.
Modernizr is a bit of javascript that will put classes on your html element, allowing you to serve different style definitions to different browsers based on their capabilities.
Obviously, these both add more overhead, but with IE9 due to only run on Vista/7 we might be stuck for quite awhile. As of August 2010 Windows XP still accounts for 48% of web client OSes.
It is not planned for IE8. See the CSS Compatibility page.
Beyond that no plans have been released. Rumors exist that IE8 will be the last version for Windows XP
<!DOCTYPE html> without this tag border-radius doesn't works in IE9, no need of meta tags.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With