Use CSS3 border-radius to make your corners rounded! In this edition of the CSS3 series, we look at how to use the third generation Style Sheet language to round the corners of div layers. There is also a quick + / – to which browsers support the border-radius CSS3 effect.
Cross Brower Compatability
As previously mentioned in An introduction to CSS3, not all current browsers support CSS3 but for those good browsers that chose to be compatible, we have two prefixes that we can work with.The Prefixes:
-moz (e.g. -moz-border-radius) works in FireFox.
-webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome.
Round Corners with CSS3 (Collectively)
The ability to have rounded corners without using images has been something long saught after, removing the need for creating those perfect little corner images with appropraite backgrounds which, at best of times, was a very time consuming task. Now with CSS3 (browser permitting..) we can create rounded corners in a few lines of code.
This is a panel set with a 5 pixel standard border and a 15 pixel border radius.
- CSS3 Border Radius (Collectively)
- #my_CSS3_id {
- font-family: Arial;
- border: 5px solid #dedede;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- padding: 15px 25px;
- height: inherit;
- width: 590px;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
Round Corners with CSS3 (Individually)
This of course does not have to be done collectively! It is possible to round corners individually.
This is a panel set with a 5 pixel standard border and a 15 pixel border radius on two individual corners.
- CSS3 Border Radius (Individually)
- #my_CSS3_id {
- font-family: Arial;
- border: 5px solid #dedede;
- -moz-border-radius-topleft: 15px;
- -moz-border-radius-topright: 0px;
- -moz-border-radius-bottomright: 15px;
- -moz-border-radius-bottomleft: 0px;
- -webkit-border-top-left-radius: 15px;
- -webkit-border-top-right-radius: 0px;
- -webkit-border-bottom-left-radius: 0px;
- -webkit-border-bottom-right-radius: 15px;
- padding: 15x 25px;
- height: inherit;
- width: 590px;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading,
Alex | Zen Elements
too bad it does not work in IE7, I’ll love to use this CSS but most of my clients use IE7
Yep second that, quite a lot still use IE7, shame….Is there a work around hack?
It is one of those things we have to wait on, unfortunately. My suggestion – as I’m sure you see around other blogs & discussions – is to continue to push for the development of CSS3 in browsers and they should get on to getting it achieved.
You can go ahead to use the CSS 3 border-radius now – along with the other CSS3 effects – knowing that some browsers will not render it and have the fallback of the standard border. If you design keeping both aspects in mind, your website can continue to work well. If you look at Twitter, it does just this.
@Joe –
Yes I found a way to make it work in IE. Did I mention IE6 :)
Grab it here
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/
Tutorial Added
http://www.tutorialand.com
@Akash: This hack does work in some instances, however not them all. Some versions of IE are not very friendly with your .htc but I’m not throwing it completely as it at least takes a step or two closer to the mark. I think I would personally continue just to use an border/image alternative than this but each to their own.
Thank you for sharing.
One issue with .htc file is they have to be served with the correct mime type http://support.microsoft.com/default.aspx/kb/306231. Not the correct mime type IE (or at least some versions) ignore them.
That’s amazing!
I didn’t know that rounded borders were possible in Firefox 3.0.5 !
I can’t wait until cross browser CSS3 compatibility. Anyone any ideas as to when this is going to happen?
@Conor | I’m afraid the best answer I can give is, “how long is a piece of string?” More and more people are wanting it, especially when discovered and if we write, prod and nudge in that direction, it will become more widely supported.
That has been said for a few years now though for a few of these CSS3 declarations… =/
Question:
Here’s my code, and my feeble grasp on how this all works is not permitting me to make this possible. Would any of you be able to show me how to add border-radius capabilities to my blog images?
.post img {
padding:4px;
border:none $bordercolor;
}
Best regards,
Krista
reply to: webmaster -at- saddlewire -dot- com
@Krista
It is possible to apply the border-radius effect to images, however the results can be a little unexpected.
Apply the following CSS and you will see what I mean.
.post img {
padding: 15px;
border:5px solid #900;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
}
The border wraps itself around behind the image, as supposed to performing any masking of the image.
While it might not be the answer you were looking for, I hope this helps you out a little in using the border-radius declaration.
I just copied the code into my webeditor, and tested it out in Firefox and IE8 and it doesn’t work in the most recent version of IE8. This is something I’m interested in, and IE8 support would make me add it now. Its a pity that for Firefox that currently it requires their own declaration.
You could also check out: http://www.curvycorners.net
@Max | The most unfortunate turn with CSS3, is definitely browser support. As you have found, even IE8 (Microsofts most recent release of Internet Explorer) does not support any more CSS3 than it did in IE6 or 7! *is continually annoyed with IE..*
Regarding curvycorners.net; I prefer to stay away from it as I do not like Javascript rending too many objects on a screen. Also, in my case just now, accessing it in IE8 found errors which caused an incomplete render of the site.
I am really so pissed off right now.. our site uses alot of rounded corners and we are using ALOOOOOOOOOOOT of images to do that..we can increase the loading of the page dramatically if we se css.. a couple of lines of test written once in the whole website :(
im really so mad at IE right now..
Just a heads up for those who are wondering why something like
-webkit-border-radius: 5px 6px 7px 8px;
will not work in Chrome: Chrome doesn’t support that shorthand. You will need to set the radius for each corner, ie
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 8px;
@biso – I suggest you look up CSS sprites to speed up your download speed.