Perfect Rounded Corners with CSS

Graham Smith – #1

Wowzer Jeff,
Just the sort of thing I was looking for for my new sites. Certainly going to give this a go quite soon.

And I really have to say hat’s off to the site design, more like a site evolution that has missed a few steps in between.

You are far and away a most talented and gifted creative. Good for you, this really takes stuff to a whole new level.

Graham

Rick Beckman – #3

Jeff, you’re the man. I knew about the -moz bits and am currently rocking them on my site; the others (as well as the [I’m guessing] CSS3 property) were unknown to me.

Thanks for rectifying that. I’ll definitely be adding support for other browsers later today.

Kim Woodbridge – #5

Hi Jeff - Haven’t talked to you in awhile. A friend and I were just discussing rounded corners - you must have read our minds and provided that code that we needed.

Thanks!

Erik – #7

I was browsing using ff3 and came to this article. Curious if it worked on ie6 I openend your site in this browser. I noted that you don’t show any theme at all in ie6.

Actually you are the first site I see that completely gave up the effort to satisfy the ie6 users. This site offcourse attracts a lot of webmasters so little problem.

But for ordinary sites with lots of less technical users these kind of new technicalities remain a problem.

I wish people abandon ie6 very quickly. Nice to see that you take a stand in this respect.

Chris Coyier – #9

I like the idea of using border-radius as well as the vendor-specific attributes. It’s very likely to become the final css3 spec, so even though I don’t believe there is any browsers supporting it yet, you’ll be future-proof. It doesn’t validate, but neither do the vendor-specific ones so whatever.

Joshua Richardson – #10

Just a note regarding rounded corners in IE, I came across a nifty solution for this that uses VML and HTC files to draw the corners.
I wish I could claim this idea for myself but I found it at: http://www.htmlremix.com/curved-corner-border-radius-cross-browser/

So if you truly want cross-browser rounded corners it is indeed possible for most browsers (without nested div’s and what not).

Great article though and it made me aware of the -khtml css statements I didn’t realise existed.

Also nice to hear you will be redesigning the website, I hope the next incarnation will be a bit more minimalistic.

teddY – #11

I love the idea of what you think about rounded corners - it’s an enhancement. Older browsers (like IE6, it’s so 1990s), visitors will not suffer from incorrect/inaccurate display or rendering of elements but simply revert to the blocky styles. The rounded corners are something like a bonus to those who use up-to-date browsers, heh.

The properties for rounded corners are aplenty, but I’m not sure which is CSS3 valid or not. Are all of them CSS3 valid or is just strictly just border-radius? So far -moz-border-radius and etc are not recognised to be valid… but that doesn’t bother me a lot since I’m not exactly a CSS puriest. I just aim to make my layouts XHTML valid - I guess that’s the most important part for designs.

Thanks for sharing again! I find your entries really insightful and more importantly, relevant to what web designers and coders alike need and want to know.

zubfatal – #12

wow, I didn’t know it could be done that simple, however what I really want is a solution that works in all browsers, still using pure css, no javascript and no images, which almost seems like a search for the holy grail heh, I mean I’ve found a bunch of examples how to accomplish this using css only, but most of them either requires images, which is allright except I don’t like it, because I want to be able to change the color of the design, without having to re-do the images. Other examples uses quite a lot of extra markup, which I’d rather be without.

I’ll probably give this a go, and forget about support for browsers which doesn’t understand it for now, since the lack of support for this won’t actually “break” anything, but just appear as square boxes instead.

zubfatal – #13

Hm, just noticed that using these properties prevents the CSS from being properly validated - it doesn’t really matter, except if you’re clinically insane about a clean validation :)

jeroen – #14

This is the answer to life!

Phoat – #15

Great write up… A very timely post for me, as I just started using progressive enhancement techniques on the sites I currently maintain and the results are well worth it.

One question… can’t you simplify your code by combining all the radius sides into one statement. For Firefox for example, I’m pretty sure instead of this…

-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;

you could do this

-moz-border-radius: 10px 10px 10px 10px;

or even more simply

-moz-border-radius: 10px;

This seems to work on all my tests and makes for cleaner code. Same applies for -webkit-border-radius but I’m not sure about khtml.

Again… great write up!

Jeroen – #17

It shows sometimes right and sometimes it doesn’t show right. But when i zoom in or out it will show right but an other border won’t anymore.

From my iPod 2nd generation

Jonathan Ellse – #18

What are -webkit, -moz and -ktml doing? I realise that they are for specific browsers, but which.

Love the coding, works a dream in every browser I can throw at it, exculding IE of course, but anyone using IE is unworthy of seeing these beatiful rounded corners.

Great Work!

Thomas Levy – #19

Never knew about these little tidbits before, soooo much easier than placing rounded corner images

thanks!

EricB – #20

I am impressed that the round boxes on this site are transparent. How is that done?

shubha – #22

Hi,

Hey this code is not working with me… is there anything i must download or refer to any file??

border-radius: 10px; this statement is showing some error in css, that its not a recognized element.

And what is that webkit or khtml or moz…

i was totally confused about how to use this…

please give me some sample page using the same..

please explain me..

Thanks & Regards,
Shubha K.S.

Vinayak – #23

Seriously man.. you have changed my life with this code LOL.

Worked instantly. I always thought this cannot be done without creating curved images or by using javasacript. Undoubtedly, your CSS solution for the purpose is THE BEST I had seen so far.

shubha – #24

hey man its working fine in mozilla… that looks really great..

but dont know why its not working in IE 7.. windows XP SP2… VS 2005

..

so is there any technique that i can make this work in IE7 also… help would greatly appreciated…

Vinayak – #26

ah Thanks to YOU Jeff, you’re the Starr :)

btw, I have few browser related questions please.

1. I have already gone through the whole blog posts and comments, but just wanted to confirm if there is simply NO WAY to get this work in IE. I find it really surprising that even IE 8 is not supporting it. May I know whats SO SPECIAL in this code that even latest browser fail to recognize it!

2. It also does not work in Opera. Gives a bit cluttered curved edges in Chrome. Works great on Safari though.

3. Works great on latest Firefox BUT this CSS code has slowed down the site browsing ONLY on FF (which is my primary browser). I mean scrolling the page has become quite rough, feels heavy. I hope you understood what I mean. Can you please browse my site for a moment and see what i mean. Btw, I experience the same behaviour on this site.

Thanks again.

Michael B – #28

awesome article! I love how using this technique doesn’t break internet explorer at all, but instead gives them a crappy straight border.
I hate IE and I hate the fact that people use IE, so I say if they want to use that browser which doesn’t support (within reason) the standards or trends of web design, then let them have a crappy experience.

I know, not exactly good for business, but what they don’t know can’t hurt ‘em.

dugfresh – #30

Does the fact that it’s not working in some modern browsers (i.e., the latest Safari, the latest Chrome, the latest Opera) have anything to do with the DTD not being “strict”? Just curious. I have to build my pages through a CMS editor, as the pages are portions of the overall website, which is already governed by several stylesheets. This requires me to insert an inline stylesheet at the top of my page…for every page I create. Anyway, the rounded corners CSS works flawlessly in FF.

Oh, and great article, btw. Very simple (which I like), and who cares if IE can’t pick it up? M$ is trying to create their own set of web standards, a feat at which they have succeeded. Unfortunately, their web standards suck, and make developing web sites that work in their browsers a migraine-inducing exercise in futility.

Ejiofor Akonam – #31

Shame on IE!

Nathan Rosquist – #32

Awesomely useful!

Thanks!

Nathan

Ourobo – #33

If I wish to create rounded tabs, where do I paste this? Can the code be pasted within openhooks?

And, of course, what code do I need to embed the above code within to have it apply to my navigation bar?

Thanks for any assistance!

Ourobo – #35

Thank you Jeff. I was able to get it working (learning a bit more about CSS in the process). I’ve also played with your piece to create transparencies. It looks like it makes the text fade as well. So I must be targeting the wrong element?

For e.g. using it on ContentArea

Extend Studio – #37

You could try FlexiPanels CSS, Dreamweaver extension that generates rounded corners css boxes from an easy to use interface.

http://www.extendstudio.com/product/flexipanels_css.html

Nicolas – #38

Thanks for the tip.

I had some corners that would ideally have been round, but I had a dynamic change-color script that would have forced me to make the corners in Photoshop in multiple colors or something.

I had left them square, but having them round painlessly on some browsers is an ideal solution.

CM – #39

Rounded corners works fine in Firefox but shows square in Safai and iPhone. What am I doing wrong?

#masthead{padding-top:1px;background-color:#c00;opacity:.85;color:#fff;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;-khtml-border-radius:9px 9px 0 0;border-radius:9px 9px 0 0;}

and

#footer{background-color:#c00;color:#fff;text-align:center;padding:4px 0;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;-khtml-border-radius:0 0 9px 9px;border-radius:0 0 9px 9px;}

and the html is:

<!-- masthead content begin -->

<!-- masthead content end -->

and

<!-- footer content begin -->

<!-- footer content end -->

CM – #40

Just the <div id="masthead"> and <div id="footer"> Inside the comments brackets above.

Any ideas why round corners don’t work in Safari and iPhone?

CM – #42

Many thanks Jeff!

The pagewrapper element above the masthead element already does have the border specified thus:

#pageWrapper{border:solid 1px #c00;border-width:0 1px;}
#masthead{padding-top:1px;background-color:#c00;opacity:.85;color:#fff;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;-khtml-border-radius:9px 9px 0 0;border-radius:9px 9px 0 0;border:solid 1px #c00;}

When I tried adding the border-width:0 1px; to the masthead element as well I still see square corners in Safari. So I don’t think that is it.

I checked my browser detection js script, and it uses the term AppleWebkit (and applewebkit) rather than just webkit (used in the css), I wonder if that is related?

CM – #43

Correction:

When I tried adding the border:solid 1px #c00; to the masthead element as well I still see square corners in Safari. So I don’t think that is it.

CM – #45

Thanks Jeff, good idea.

I assumed you guys had actually tested it on Safari already.

I’ll do the tests and post the result here when I’ve pedalled 80km to also test it on the iPhone.

CM – #47

Thanks Jeff :)

I’ve got it working in Safari (but haven’t had chance to look in iPhone yet).

Here’s the key.

For rounded corners Safari ignores the abbreviated coding format 9px 9px 0 0; but does recognize the very long format:

-webkit-border-top-left-radius:9px;-webkit-border-top-right-radius:9px;

So this works in FF and Safari:
(Note I deleted the khtml and repeat border-radius lines for code brevity)

#masthead{padding-top:1px;background-color:#c00;opacity:.85;color:#fff;-moz-border-radius:9px 9px 0 0;-webkit-border-top-left-radius:9px;-webkit-border-top-right-radius:9px;}

#footer{background-color:#c00;color:#fff;text-align:center;padding:4px 0;-moz-border-radius:0 0 9px 9px;-webkit-border-bottom-left-radius:9px;-webkit-border-bottom-right-radius:9px;}

In the footer form, you must include some text in the footer for the bottom round corners to show, otherwise the top square corners cover the bottom rounded.

I also discovered it works without any added browser detection script, and it also works if you designate -applewebkit- instead of -webkit-.

CM – #49

Thanks for posting the original article Jeff, and my fellow commentators. The code I used also works okay in iPhone’s browser.