CSS Rounded Corners
The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating images and requests to the server. Today, rounded corners with CSS are supported by all of the major browsers: Safari, Chrome, Internet Explorer, Opera, and Firefox. Let's look at border-radius syntax, caveats, and Internet Explorer support.
Syntax and Standards
The CSS3 standard property for applying rounded corners is border-radius. This property is added to elements just as naturally as width or positional properties are:
.roundElement {
border-radius: 10px;
}
The preceding statement assigns one rounded corner value to each of the element's four corners. A specific border radius may also be added to each to elements individually:
.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}
A shorthand border-radius syntax is also available where application:
.oddRoundElement {
border-radius: 12px 5px 12px 5px;
/* or */
border-radius: 12px 5px;
}
The pattern details top-left, top-right, bottom-right, bottom-left.
Browser Support and Prefixes
Since rounded corner elements and border-radius were not a set standard, each browser implemented their own prefixed {prefix}-border-radius implementation. Those prefixes look like:
-moz-border-radius: 20px; -webkit-border-radius: 20px; -o-border-radius: 20px; /* firefox's individual border radius properties */ -moz-border-radius-topleft:15px; /* top left corner */ -moz-border-radius-topright:50px; /* top right corner */ -moz-border-radius-bottomleft:15px; /* bottom left corner */ -moz-border-radius-bottomright:50px; /* bottom right corner */ -moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */ /* webkit's individual border radius properties */ -webkit-border-top-left-radius:15px; /* top left corner */ -webkit-border-top-right-radius:50px; /* top right corner */ -webkit-border-bottom-left-radius:15px; /* bottom left corner */ -webkit-border-bottom-right-radius:50px; /* bottom right corner */
Essentially you would need to make a separate declaration for each browser. Adding the same rule for different browsers is annoying so adoption of the standard border-radius is important.
Internet Explorer Support
Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <style> border-top-right-radius: 7px; border-top-left-radius: 7px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; </style>
While many solutions have been presented, I've found the best to be a small JavaScript-powered solution called CurvyCorners. CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.
Using CurvyCorners is quite simple. The first step is adding the CurvyCorners.js file to the page:
<!-- SIMPLY INCLUDE THE JS FILE! --> <script type="text/javascript" src="curvy.corners.trunk.js"></script>
CurvyCorners detects the presence of border-radius on DOM elements and works its magic to duplicate the effect in IE. There are no images involved. You may also identify specific elements to apply rounded corners to:
var settings = {
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 },
antiAlias: true
};
/* moooo */
$$('.round').each(function(rd) {
curvyCorners(settings,rd);
});
I highly recommend specifying elements to add rounded corners to, as checking the entire page is a taxing process; remember that the rounding occurs on every single page load.
Rounded corners may be achieved with CSS' border-radius property in Internet Explorer, Firefox, Safari, Chrome, and Opera. This small feature opens a new realm of possibilities in bridging design and code. Now that browser support is abundant and browsers are beginning to use a standard border-radius property name, there are really no drawbacks to relying on CSS for your rounded corners.
I actually used curvy corners js but it became a pain to use. esp when an element uses two or more classes or a child. the corner takes importance regardless if you use multiple classes in the stylesheet.
For Example:
.round { border-radius: 5px; }vs
.menu.round { border-radius: 15px; }I found another CSS only method which works on all browsers from Internet explorer 6.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
It seems very promising and straight forward solution.
I tried to use the HTC file method. Proved more complicated for me than the meta tag method. It may be easier for those familiar with using HTC files in the root directory of the server, but have to admit, the meta tag method does not require calling yet another file to use in the display of the web page. Have to consider that servers get buggy at times and calling files may be delayed or fail which ruins the purpose of a HTC file. Hence the meta tag method is far simpler.
David, what do you think about Pie?
According to me, it’s much better to setup corners in one (css) file, instead of two (css + js or js script in some template file). Also Pie requires only one additional line to use (and the file, of course).
Is this site displaying curved corners in IE 8 for anyone?
Nice discussion on curvy corners.
I specifically liked the part on IE9 where meta tag is used.
where can I download the script?
Very very useful. you saved my day of headaches with IE
Note that there is a bug in IE9 when using rounded corners and background gradients: the background gradient will be bleed outside of the rounded corners.
In Firefox if I put an image in an element and then use border-radius, Firefox clips the image and it looks great! Works the same way in IE9. In Chrome (or any webkit browser) the border is rounded but it doesn’t clip the image and it looks horrible. What am I doing wrong? I’m about to post this on stackoverflow and see what hit . . . just gotta get some screenshots together.
Try putting it inside a separate div with overflow:hidden
I just posted on Stack Overflow and I know I shoulda put it in webdesign.stackexchange.com or something like that. Oh well. http://stackoverflow.com/questions/6127613/how-do-i-round-the-corner-of-images-in-chrome-and-other-webkit-browsers
Thanks, I needed the
I needed the <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
You don’t need to be an expert to create something beautiful check this http://www.divvers.com.
Btw in the process of creating this tool we visited your blog many times thank you mr Walsh.
I am responsible for much of the recent development of CurvyCorners. Hopefully it won’t be long now before it is out of date! The good news is that Firefox finally seems to be respecting the CSS3 standard and -moz-border-radius will fade into history.
Thank you so very much for sharing this! Completely saved my arse. :)
I tried to use border-bottom-right-radius tag in IE9 but it didn’t work but if used border-radius tag then it worked.
I have the meta tag and also
I wanted to know is it even supportedin IE9?
anyone know how to create box like that–> [img]http://i53.tinypic.com/2e3u883.jpg[/img]
curvy.corners.trunk doesn’t work directly on inputs.
IE keeps breaking the round corners – does the line but do not get rid of bg color
This is funny, your site is rounded in probably every browser except IE. Why in the world would they make it this difficult!?
hi, i’m using the script its very very nice your work, but i need have the control of the height of the object, if my objet have a hieght 50px the script make the height of 100px, can you help me ! thanks !
IE is a pain, thats all i have to say about that ;)
This website looks like sh** in IE8. Hard to take an article seriously when teh developer of the article (and thus this page) can not even program his own website to work.
I’m wanting to create a subtheme for drupal … and I’m all new to this. Anyone want to tell me how I can “unround” the corners in my current theme without changing the css (which is what I understand I’m not to do). Thanks!
I learned through the frustration that certain elements will break your rounded corners.
Be weary of using CSS gradients with rounded corners. Internet Explorer does not round the corners if you use a CSS gradient. Instead, use a method like this or come up with a better method folks. Basically, all I did to get rounded corners to display in IE was set the background color to a flat hex. Other browsers read their gradient syntax as long as you declare it important.
Cheers
This happened to me as well, thanks for pointing it out.
Hai i am using the curvy cornes for my site there was a point in IE where a ajx call takes place and there after all my curvy corners are lost. we rectified this problem with the jsf.add.on event.By this we are able to get the curvy corners after a jax call but the css color of the tabs are left the same.And there was a point where the transactions page is coming all the way down out of the width allocated.I t works fine if i remove the curvy corners is there any solution for it.I know it sounds weird but i have gone throgh many sites where i coudnt find a solution to fix my problem.I am using
{ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}This works perfect in Mozilla but in combination with curvy corners in IE its becoming a mess.Any help would be appreciated
THANK YOU for this article. This saved me a lot of work.
-moz prefix no longer working on FireFox 13 .
Someone have a solution??
And now? What to do with all the websites with roundcorner?
I tried just
border-radius, without the-moz-, and it worked!can we use rounded corners in internet explorer without any java script
In regards to the bug affecting CurvyCorners and IE9, I came up with a solution that makes that bug go away. You can read about it on my site: http://www.jeremyrperry.com/blog/bug_using_curvycorners_ie_9_and_its_fix
i put the meta tag in the header and it’s worked thank you……
the meta tag worked for me thank you…….
CurvyCorners don’t support inline elements like input…
Hi, I have tried everything but round conner is not working in IE
it’s working fine in firefox
after this nothing change in IE
Does not work in IE9. Box-Shadow does not work either.
I have tried lot’s of thing but border-radius and background-size is not working in IE8 please let me khow, what can I for css compatibility in IE 8.
I hope for immediate response!
very useful website. working fine in my all broswer Thanks admin
awesome border redius…..
Is there any turn around method other than curvy cornors without using JS.
hi! What is solution of Border Radius properly work on IE browsers..??
Aaaah. You saved my day… I struggeled around with IE 10 and rounded corners…
Simply putting “” into the header was the solution!
Thank you. :-)
forgot the PRE.. :-/
There’s a typo in this line:
“CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, event supporting anti-aliasing.”
should be:
“CurvyCorners uses a series of JavaScript-generated DIVs to draw rounded corners, even supporting anti-aliasing.”
e.g. “even” vs. “event”
Hey,
This is really useful bunch of work also u can refer http://www.nerdcorelabs.com/ to get a better idea on this.
Cheers…
its not supported in IE 8.
It is not working with internet explorer 8.
Thanks a lot for sharing this but it’s not working in Internet Explorer 8