CSS3 Border-Radius & Rounded Corners
Use CSS3 border-radius to make your corners rounded! In this edition of the CSS3 series, we use the third generation Style Sheet language to round the corners of our layers both collectively and individually.
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 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 just 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 {
- border: 5px solid #c4c8cc;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- }
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 {
- border: 5px solid #c4c8cc;
- -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;
- }
The Zen Elements CSS3 Series
- CSS3: Introduction
- CSS3: Border Image
- CSS3: Border Color
- CSS3: Border Radius
- CSS3: Box Shadow
- CSS3: Font Face
- CSS3: Gradients
- CSS3: HSL & HSLA
- CSS3: Multiple Column
- CSS3: Multiple Images
- CSS3: Opacity
- CSS3: RGB & RGBA
- CSS3: Text Shadow
- CSS3: Transform
Thank you for reading!
Alex | @ZenElements
�)
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;
Thanks. This is a real nice hack.
Respect and thanks for the good work.
@biso – I suggest you look up CSS sprites to speed up your download speed.
You can also add -khtml-border-radius and border-radius to that list.
@Ronald et. al:
WebKit (Safari and Chrome) development builds now have full support for the shorthand, so it’s only a matter of time. IE does not support SVG graphics, and fancy border-rendering will follow behind that, so it may be a while. People who insist on using IE deserve to see slightly uglier Webs, as long as everything works right.
If it’s helpful at all, I have compiled a table comparing -webkit- and -moz- with the spec, including some shorthand options you don’t list here. You might find it handy. Worth remembering when you look at the table is that unreleased webkit builds mimic Mozilla almost exactly (except they specify the corners correctly).
I read a note by an Opera developer that when they implement border raduis they would either use
-o-border-radiusor straight-upborder-radiusif they thought the spec was stable enough. I’m hoping for the latter. It’s been a while since that comment, though.Hope this is helpful.
@Conor – IE9 appears promising.
@Boo – “promising” in a Microsoft context usually leads to disappointment.
We can harsh IE all we want, but the fact remains that as of now NO browsers support the CSS3 border-radius property. CSS3 isn’t final. (Hopefully, it will be someday.)
Firefox and Safari added browser-specific extensions, the same thing that got IE in trouble with standardistas back in the day.
Even though they *could* safely add forward support for plain border-radius, they don’t. And so we are stuck writing three rules instead of one. Very depressing.
the only way to propel support for css3 properties like these are to simply jump ahead and use them. common folk need to see what they are missing when they use subpar browsers. the popular argument i hear from them is that when they do happen to try a different browser that they see no difference in the sites they use, so why change? developers have to stop being reluctant and afraid to develop with modern technologies. i’ve abandoned support for ie in all forms. someone has to take the big step forward. i for one am one of the few who are not afraid to develop sites using css3 properties.
big deal, users still browse the web using ie. inform them, then! leave messages telling them that their browser is not advanced enough to render the site properly. start making the move now. already you see one of the biggest web companies doing this with a product of theirs: google’s wave application. they’re not afraid to develop with the future in mind.
don’t tell me i lose out by cutting ie out of the picture; that’s the only argument i hear: you’re not supporting them so you will lose potential members, potential money. forget it–if you have the will to move the web forward, DO IT.
For a browser that generally has a lot of custom code (like IE only html comments) you’d think they’d have something for rounded corners.
Opera 10.50 (still in alpha version) supports CSS3 and border-radius, the syntax is: border-radius: (didn’t see that coming, did you? :))
Anyways, can’t wait for the stable public release.
Agreed with what some of the folks here have been saying, the only way we can push these tricks into mainstream browser support is by pushing right ahead and using them. Rounded corners are more of a cosmetic thing than a key for actual navigation – so if a site suddenly looks less glamorous to Internet Explorer users, it’s incentive for the end user to upgrade their browsers.
It’s one thing for a site to be navigable by earlier browsers, but it’s another entirely to have sites look cleanly identical as well.
Thanks tutorial added
Thanks…very helpful.
In the ie9 platform preview there is now support for svg and border-radius (as “border-radius”). Hopefully Mozilla and Webkit will move to a standard “border-radius” and we won’t have to include so much in the css. Unfortunately (and typically Microsoft), ie9 is not going to be released at all for any OS before Vista. So users who will not update their OS will be stuck (and will hopefully move to Mozilla or Webkit).
The corner radius issue of IE gonna solve.
http://kbala.com/ie-9-supports-corner-radius/
You replied to krista
“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.”
How do I solve this problem?
Just thought up a new name for your kind of people dedicated to the zen of CSS:
Css-zen-ites!!
Superb site. Very nice :)
keep it up!
regards,
mark
@Abraham – I think if you use background-image in the container you are applying corner-radius to, the image is masked.
As for other comments on leaving behind IE, that would be nice, but not possible. I don’t see my parents trying another browser anytime soon. Also, the company you work for will never think about moving forward with technology, unless it means more customers. I don’t understand, though, why FF has it’s own declaration. Isn’t one of the points of CSS to shorten the amount of code?
Nice post!
There is a border-radius generator here:
http://www.webestools.com/css3-border-radius-generator-moz-webkit-rounded-corner-code-maker.html