About the CSS3 border radius property
So I have decided to use the CSS3 border-radius property on some sites. They are personal projects so I don't care if they look a little worse on IE. After a few tweakings I've ended up with using things like this:
#foo {
border-radius: 8px 4px 4px 8px;
-moz-border-radius: 8px 4px 4px 8px;
-webkit-border-radius: 8px 4px 4px 8px;
-khtml-border-radius: 8px 4px 4px 8px;
}
No browser seems to support the first notation yet. That's fine as CSS3 isn't complete. However, mozilla, webkit and khtml-based browsers should be ok. IE and Opera will just ignore those.The syntax differs in some details though, see for example:
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
Oh, and Safari doesn't seem to support a radius given in percent, mozilla does:
-webkit-border-bottom-left-radius: 10%;
This doesn't work for me in Safari. By the way, this blog's wordpress template uses CSS3 border radiuses. Hi IE users :-)
Update: This post led me to Drew Diller's blog. He has an interesting technique for rounded corners in IE.Another technique by Remiz: see other technique for rounded corners in IE. Who knows, maybe I will be able to deploy sites that use border radiuses in the future, even if Microsoft has no plans for supporting them in IE8.
I have put this code but main proble is IE6,IE7
.table_border
{
/*background-color: #ffffcc;*/
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
-khtml-border-radius:1em;
border: 1px solid #CCCCCC;
padding: 10px;
width:564px;
height:auto;
}
<a href="http://www.cssdog.com/css_borders.html" rel="nofollow">http://www.cssdog.com/css_borders.html</a>
Hi, IE doesn't support the border-radius yet (not sure about IE 8).
IE8 Wont Support border-radius. Stick with non-beta versions of IE. I had trouble going to windows.com with IE8. Stick to Firefox
Thanks for the links.
Remiz's trick for rounded corner works in IE also. ( Its not Demiz :) )
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/
Thanks, fixed!