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
- CSS3: Transition
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
Ok, this is great but now how do I get IE to round ONLY the top left and top right borders using border-radius.htc.
Right now it rounds all. I’ve tried using “border-top-left-radius” etc but border-radius.htc doesn’t work without the plain “border-radius” CSS attribute.
Thoughts?
@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
For those folks havin gripes with IE and no CSS3 – give this a try:-
http://css3pie.com/
It doesn’t support everthing, but for the rounded corners, I think it’s worth loading a .htc file
A lot of people here are saying that you should wait on this because of the clients who use IE7. I say, USE IT NOW! The people that sit back and wait for everyone to adopt this stuff are going to be left in the dust and it’s their faults, not the clients and not the browsers. If we design awesome sites using CSS3 and HTML5 it will light a fire under Microsoft butt. I don’t design for outdated computers. You shouldn’t either.
This is what i need for one of my projects. Thanks.
Nice
Thanks
Thanks!
not using this because of ie7?!! Are you guys kidding me! Totally use it! it has zero impact or affect on IE7 so no harm no foul! Reward those who are wise and tech savvy for their choice. I’m sure it works for Safari and Google Chrome as well. Not using something this easy that adds so much with so little code that has zero negative impact (i.e. you don’t have to bulk/target code for IE) only helps IE drag everyone down like the dead anchor it is. Why punish people that actually know what’s good for them and make them suffer the same look and feel that you provide IE users? I say go for it! Throw in those extra tweaks for the awesome browsers and light the way towards a better internet!! /rant
Cheers, great article. Straight to the point.
That is what I am looking for
Nice one, i’m new to CSS3 so finding things a bit tricky to get my head around at the moment , this has helped me out. Cheers.
Nice Very helpful…..
Great article. It works on all browsers except IE <=8
First time I’ve visited your website. I love it. Thanks for everything you do.
well, nice guys,, I learn much from here
This post is genuinely a pleasant one it assists new web visitors, who are
wishing for blogging.