Cross-browser CSS3 border-radius (rounded corners)
Currently there are multiple variations for creating a HTML elements with rounded corners. The simplest of these is the method that uses CSS3.
Fortunately almost all modern browser (FireFox, Safari, Chrome and Opera since 10.50 pre-alpha) supports CSS3 border-radius, but unfortunately none of a versions of Internet Explorer (even IE8) does not support this property.
I very long time was waiting for a moment, when I can safely use the border-radius property on my sites. And this moment has finally has come – now we can make rounded corners in Internet Explorer with his means. This method uses VML and behaviour.
border-radius for modern browsers
This is the way that works in all modern browsers (except IE8) like FireFox, Safari, Chrome and Opera since 10.50 pre-alpha:
.rounded-corners { -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Chrome */ border-radius: 10px; /* CSS3 */ }
border-radius for Internet Explorer
Download the border-radius.htc file, put it in the same place where your CSS file, and then use this CSS code:
.rounded-corners { behavior: url(border-radius.htc); }
I think it’s better to put this CSS in a separate file and connect it using conditional comments:
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" /><![endif]-->Demo
Download crossb-rowser border-radius demo.
Another nice looking solution to fix IE is CurvyCorners:
http://www.curvycorners.net/
Been using it for a while and it’s easy to use and looks great.
Good solution, but it have one minus – this is a script file size (28 Kb). Script, which i described in my post is only 5 Kb.
I see PIE as 28Kb and Curvy about 28Kb. Am I wrong?
Wow.. just got PIE working. Awesome!!!!!!!!!!!
it’s not working in opera, is there any other solution………
Thank you for this…
Can you help me to find a resource for CSS 3.0, and how can I use it because actually I can learn css 2.0
Very good site about CSS3 is css3.info. Through the Google you may find many blogs that write about CSS3.
Oh… thank you very much.
I want to learn so things about web developer because I haven’t any trips about it. just windows developper….
thank you again
This link must be very useful for you – http://aext.net/2010/01/10-best-tutorials-to-learn-css3/
Thank you very much… When I finish my lessons about windows developer I will start on Web Developer and If I have any problems I will call you.
Great information in the given site, But I guess it is early days, there are lot of things on CSS3 to come out
I am very new to web design. I need your assistance.
I have downloaded the .htc file to the root of my site.
This is my css for border-radius:
.rounded-corners {
-moz-border-radius: 20px; /*Firefox*/
-webkit-border-radius: 20px; /*Safari and Chrome*/
-khtml-border-radius: 20px; /*Linux browsers*/
border-radius: 20px; /*CSS3*/
behavior:url(border-radius.htc); /*IE, should work for all*/
}
#lefttop {
width:194px;
height:235px;
margin:10px 0px 5px 10px;
padding:5px;
background-color:#FFF;
float:left;
position:relative; /* for IE rounded corners */
}
Here is a sample of my html (where I am using rounded-corners):
Left bottom links or content
I placed my conditional statement in the as follows :
When I test in FF — no problem, when I test in IE I do not see the boxes I only see the content — It’s as if they are transparent.
Is there some extra code I need to add in my css, is my conditional statement correct?
Thanks for your help
I not see your HTML.
<must be replaced to<, when you pasting a HTML code into the comment form.I’m sorry — I have figured out how to get it working. It just took a lot of trial and error.
Thank you just the same,
Gail
How were you able to get it working? I’m having the exact same problem.
I’m also having this problem in IE 6, can only see the text inside the divs. If i remove behavior: url(border-radius.htc); i can see the boxes but obviously without round corners. Would be great to know how you fixed this,
thanks for your article helped me overcome round in IE
Hi Dimox;
I’ve installed your round-corners htc file and it does work –but there’s a strange thing happening too: the div has a transparent background and the page has a background with a gradient from dark to medium gray. When we apply your htc file the div gets its corners rounded in IE6, but the gray background chages to all black. I can change the background to another plain color, but it won’t show the gray background. There’s also some padding that’s being ignored. What can be causing this?
I’m not author of this script and can’t help you.
Why not just put the same background in that div? Also, did you try specifying a z-index value to that div?
If it’s a transparent background, it’s probably a conflict with whatever javascript you’re using to allow transparent pngs in IE6.
try adding the following to the divs and/or divs that the divs you’re adding rounded corners to sit within:
position: relative;
.box8 {background-color: #f0f0f0;
border: 3px solid #A0F0AF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
behavior: url(border-radius.htc);
}
In IE7 when clicking on the input but not on the text the cursor is gone and keyboard is not working until clicking on the text again.
<input type="text" value="test" class="box88"/>Sorry, forgot about escaping
This technique works nicely. Thank you!
I have a question. How to use this technique with uneven round corner border, such as:
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
?
as the regular css border radius is:
.box1 {
background-color: #f0f0f0;
width: 533px;
height: 50px;
margin: 0 auto 15px auto;
padding: 30px;
border: 1px solid #d7d7d7;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}
how can i use both background colour and background image for any div? it doesnt work both. thanks for your help.
just mentioning, since i’m cleaning border radius using !important in usercss.
ff3.6.6 ignores border-radius:0. needs -moz-border:radius:0.
however, there might be some interacting complications. no error console indications of syntax error, but need to check in firebug.
i use htc file in the root directory but i have only to see text there is no border .
i use IE 8 and external css file for IE but there result is none.
help me I want the solution of IE rounded corner support.
Put the border-radius.htc in a folder where is your css file.
To Sylvia
Use PIE.htc it’s working fine
Basically it’s a CSS3 hack on IE, so use border-radius.
http://github.com/lojjic/PIE/archives/master
Hello,
Great solution, really comes above a javascript solution but as someone already pointed out and tested and confirmed by me, it doesn’t work on Opera. Any solutions for that?
If you are using Opera 10.5 or higher, it must work.