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 somewhere on your site, and then use this CSS code:
.rounded-corners { behavior: url(http://yoursite.com/border-radius.htc); }
And replace http://yoursite.com/ on your absolute path, where you have placed the border-radius.htc file.
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………
try this:
-opera-border-radius:5px; /* Opera */
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.
This script is only intended to fix IE.
The latest versions of Opera will understand border-radius. For older versions, I Opera might have its own property (not sure):
-o-border-radius:5px;
So, you might end up with something like:
-webkit-border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
In IE8 I receive the error:
Line: 98
Error: Unexpected call to method or property access.
appendChild
suggestions?
wen i use htc file with some external js files linked in the html i get a ie error………some ones help is appreciated
it’s very cool…& its very help full to decrease the size of website… ;)
everything looks good, but please explain the border-radius.htc file
Hi,
Works nice, but am I the only one missing properties for specific corners?
Like:
border-top-left-radius: 3px;
border-top-right-radius: 3px;
How can we write css for top-left ronded corner, bottom-right-rounded coners
in ie
Thank U Man for solve my all problem….. :) :) :) :) :)
Hi,
this is vary useful to decrease the size of website, Works nice, but am I the only one missing properties for specific corners?
SO please send me solution of this property if anybody have.
Like:
border-top-left-radius: 3px;
border-top-right-radius: 3px;
Please help me…..
This is great. But doesn’t work in wordpress.. so not that great anymore. Any ideas anyone?
I also can’t get it to work in Wordpress.
Anyone have any ideas on how to get it to work?
If not works, I recommend to use more modern way – http://css3pie.com
The border does not grow with the dynamically growing conent especially on IE7 and 8 (that I tried) the content bleeds thro’ while the border around the box stays the same. I am trying to use this border for a treeview jQuery plugin which is found here.
However, to see how it needs to effect. Just use a plain border as border:1px solid #ccc and you will see the border just grows around the tree as the size of tree increase or decrease and you will see it doesn’t do that when this .htc solution
Any help please… Please?
S
It drops the background-position property.
Thanks for sharing this info man. its really useful
Hi Dimox,
Thanks for the information. I used the script in Joomla, its not working for IE. Same script i tried out of joomla its working fine in IE. I tried absolute and relative both the paths still its not working. Please help me..
Thanks
I discovered that the .htc file doesnt work when I put it in the directory with the css files, so it is in the Root.
But now all I get is that the div that I have it applied to is just filled with black.
Not working in Opera..give solution for Opera Browser.
“Rounded corner / Curved corner divs using CSS 3 in all browsers”
All browsers? Doesn’t appear to work at all in Opera – just downloaded the example here which the above statement comes from – square corners.