skip to content

CSS: border-radius and -moz-border-radius

One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners.

While Internet Explorer before IE9 doesn't support many (or any) advanced CSS properties, the Mozilla (Firefox and related browsers) and WebKit (Apple's web browser engine used in Safari and Chrome) and Opera have supported them for many years.

The vendor prefixes (-moz, -webkit) are now no longer necessary for the latest browser releases as they have all adopted the official CSS3 syntax.

Definition and syntax for border-radius

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.

Here are the CSS and browser-specific attributes in question:

CSS3 Mozilla equivalent WebKit equivalent
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

Prior to IE9 these CSS3 properties do not work in Internet Explorer. The 'Mozilla' versions however work perfectly well in Firefox and other Mozilla-based browsers and the 'WebKit' ones in Safari and Chrome as well as the iPhone/iPad.

Each of the individual corner CSS3 properties take either one or two length values (generally 'px' or 'em' values). If a single value is supplied then that becomes the radius of a rounded corner. If two values are supplied then they become the horizontal and vertical radii for an elliptical corner.

The Mozilla syntax before Firefox 3.5 only supported round (as opposed to elliptical) corners and adding a second value would result in a standard square corner.

The border-radius property in WebKit accepts one or two values and uses them to style all four corners making a nice symmetric shape. The new Firefox syntax allows you to define four different round or elliptical corners. A slash has been introduced to separate the horizontal and vertical length settings.

There is no pure-CSS solution for rounded corners in IE8 or other primitive browsers. Only a range of JavaScript patches which can be found by searching online.

Using -moz-border-radius in Mozilla (Firefox)

The following examples will only work if you're using Firefox or another Mozilla browser that supports -moz-border-radius properties.

Example 1
-moz-border-radius: 1em;
Example 2
-moz-border-radius-topright: 2em; -moz-border-radius-topleft: 2em;
Example 3
-moz-border-radius: 2em 0;
Example 4
-moz-border-radius: 3em 1em;

The Mozilla properties used here do not conform to the standard (hence the -moz- prefix) and until Firefox 3.5 only supported round corners. In newer versions of Firefox elliptical corners are also possible.

As some people have pointed out these properties can be used not just for 'boxes' but for many other HTML objects including form elements.

For those of you still seeing square corners, here's a snapshot from Firefox showing the rounded corners effect:

There are a number of tricky JavaScript solutions that allow border-radius and other CSS3 properties to be seen in Internet Explorer and other browsers - but the overheads don't really justify the results.

Using -webkit-border-radius in Safari (Webkit)

The latest versions of Safari now support -webkit-border-radius. Previously only the 'nightly builds' contained this functionality In Opera the syntax for the corners is the same as in Safari, but the behaviour of border-radius with two values matches that of Firefox, as seen in Example #7 below:

Example 5
-webkit-border-radius: 1em;
Example 6
-webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px;
Example 7
-webkit-border-radius: 24px 0;
Example 8
-webkit-border-radius: 36px 12px;
Example 9
-webkit-border-top-right-radius: 50px 30px; -webkit-border-bottom-right-radius: 50px 30px;

For those of you still seeing square corners, below you can find asnapshot from WebKit showing the rounded corners effect. Note particularly the change in syntax and the effect of passing two values to -webkit-border-radius as compared to the -moz-border-radius example above.

WebKit also has limited support for other CSS3 border properties such as: multiple backgrounds; border background images; and various advanced selectors (::select for example) making it a great test platform for forward-looking developers. Stay tuned to the Surfin' Safari blog linked below for the latest exciting developments.

Other special effects

WebKit, Firefox and Opera now support a number of other CSS3 features, including the following simple effects and transforms. Thankfully, unlike rounded corners, for the shadows and transforms there does seem to be agreement on a common syntax.

-webkit-box-shadow

Shadow Example
-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; border-radius: 36px / 12px; box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

Clearly there are still some anti-aliasing problems, but for corners and gentle curves it can look pretty cool.

Then there are various -webkit-transform option that can be used to create all kinds of wierd and wonderful shapes:

-webkit-transform: rotate()

Rotate Example
-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; border-radius: 36px / 12px; -webkit-transform: rotate(-5deg);

-webkit-transform: skew()

Skew Example
-webkit-border-radius: 36px 12px; -moz-border-radius: 36px / 12px; border-radius: 36px / 12px; -webkit-transform: skew(5deg,5deg);

For the browser-impaired here is a screenshot from Safari showing the effect of these CSS rules. The same effects are now possible in Firefox, Opera and related browsers. Just replace -webkit with -moz or -o, except for border-radius and box-shadow where Opera uses no prefix.

Also in Safari these and other transformations can be implemented as animations using just CSS effects triggered by hovering over an element - no JavaScript required.

New short-hand properties

The following syntax is now working in Firefox and Opera allowing you to specify not only matching elliptical corners, but also different elliptical corners in one shorthand property.

Here we've recreated two of the WebKit examples above using the new syntax. You can see that the individual corner settings work exactly the same now in Firefox as in WebKit, but for the short-hand property you need to include a slash:

Example 8
border-radius: 36px / 12px;
Example 9
border-radius-topright: 50px 30px; border-radius-bottomright: 50px 30px;

And now to the scary part. Using the short-hand property, all values before the slash apply to the horizontal radii and all values afterwards to the vertical. In this example we've created a hybrid of the previous two examples.

Example 10
border-radius: 36px 50px 50px 36px / 12px 30px 30px 12px

Here you can see what these boxes look like in Firefox 3.5:

With all major browsers now using the same syntax, the vendor-prefixes have been dropped and the standard seems to be set in stone.

References

Translations

< CSS


Like Tweet     Bitcoin

User Comments and Notes

Eric Naeseth 1 December, 2007

Great article. You may want to update it to say that, as of Safari 3, the -webkit-* properties are supported.

Thanks, and yes, Safari 3 now supports rounded corners, box shadows and a bunch of other -webkit properties by default. I believe they're also supported on the iPhone and other mobile devices running WebKit.

Art Geigel 13 March, 2008

The rounding effect is really nice and handy to have. 2 things I think might be important to point out: 1) that the border radius can still be applied to an object that doesn't have a border attribute, and 2) that even though rounding can now be handled by the browser it does not anti-alias the edges of the corners against the background - and some hardcore web interface users will still want to use their graphical corners to achieve this effect.

Thanks for pointing that out Art The edges are already much much nicer in Safari than Firefox so hopefully this is only a temporary constraint.

Chris 10 October, 2008

Update: As of October 2008 the rounded corners in both Safari 3 and Firefox 3 are antialiased. Come on Microsoft, support border radius in IE8! (or 9? or 10?! Please!)

TJ 14 December, 2008

A little layering and play with the opacity and you can get some pretty cool effects with this.

oilyflutesalad 3 July, 2009

From the MDC: "Note: In Gecko 1.9.1 (Firefox 3.5), this property was updated to match the latest revision to the CSS3 specification for the border radius properties. Thus elliptical borders are now supported."

lazarusgraveyard 4 July, 2009

Amazing! Im a fledgling and thought id cracked css. I was beginning to look at php when i started noticing sites with rounded corners that were not constructed by background images or .js - this post was incredibly illuminating to me - thanks!!

Chris S 5 August, 2009

It all looks great, but for my clients any technique I use must work across all major browsers or it's simply not accepted. I suspect most commercial web work is like that. Like it or not IE is still by far the dominant player in browser usage. So while it's good to see and fun to play with, until Microsoft join the party (not likely just now) this will remain a hobby rather than a real working tool.

You might think IE isn't going away, but on this website it accounts for only 16% of traffic. OK, on other sites it's up around 60%, but that's hardly the domination they used to enjoy. At some point Microsoft is going to have to stop being the handbrake on web development that it's been since 1997 and adopt these new features

Rolland 8 September, 2009

Very interesting and complete article, thanks.
Just to say that Google Chrome 2.* for PC support all the -webkit properties.

Jerry 25 September, 2009

Thanks for the excellent summary of the border-radius CSS3 property. All the webkit extensions make me want to see CSS3 finalized and in widespread use.

I compiled a table comparing -moz- and -webkit- against the proposed CSS3 standard that might make a useful supplement to what you have done.

Jerry Seeger 28 September, 2009

Another bit of good news: as of Firefox 3.5, -moz-box-shadow: and -moz-transform: work.

Thanks, I'll have to check that out

Hindi Jokes 2 November, 2009

Great Article ! But on my website I am getting a CSS validation error i.e. Unknown Property 'border-radius' Declaration Dropped. Any Info on this one?

CSS3 has not yet been formally adopted so those properties will not normally validate.

Jorge 3 January, 2010

As of December 2009, there are public builds of the Opera browser (available in my.opera.com/desktopteam/blog/) that support border-radius, with no vendor prefix.

CPKS 21 March, 2010

We live in interesting times. Chrome on Windows and Chromium on Linux both behave more or less as you'd expect (although the Windows version doesn't cope with Example 5!). Safari on Windows 4.0.5 doesn't round *any* of the boxes in examples 5-9 (no idea why not), but certainly works in other contexts. Chrome/Win and Opera 10.5 now support CSS3 border-radius, Safari/Win not yet.

Regarding "There are a number of tricky JavaScript solutions that allow border-radius and other CSS3 properties to be seen in Internet Explorer and other browsers - but the overheads don't really justify the results.":

- that's certainly a colossal put-down for those of us who have expended great efforts in this area. I don't know why you would go out of your way to say that. However, we can agree that the best way to 'enjoy' (if that's the word) rounded boxes is to use the latest Opera or Chromium.

No offence intended, of course At the time of writing, border-radius had only just been introduced in the WebKit Nightly Build and the 'hacks' used to round corners in Explorer were really substandard. More recent solutions - the CurvyCorners project for example - are much more graceful

Jaya 7 May, 2010

The corner radius issue of IE gonna solve.

kbala.com/ie-9-supports-corner-radius/

Franz 29 June, 2010

i used you webkit-transform infos to create www.facesaerch.com/banana.html maybe you like it

Very nice

Adrian 28 July, 2010

Thanks for the excellent summary and examples, it helped me a lot. You might like to know that there is now a neat solution for getting some of these css3 properties working in IE as well.
Check out css3pie.com/

Al 7 November, 2010

I have noticed something pretty weird. I am running Firefox 3.6.12 updated always to the minute. I was still seeing square corners in your examples, so again I reinstalled the last version. Reloaded the page and here is when the weird thing happens: for an eye blink of a second, the rect-angles did acquire the round and ellipse corners before going back to be square corners!

A number of people have reported intermittent problems with Firefox not displaying the rounded corners. All I can suggest is that for your own website make sure the CSS is included in the document HEAD or an external stylesheet. For this article most styles are defined in the BODY which is not recommended.

Elijah 25 November, 2010

I'm not having any problems. This tutorial/article was perfect and my client's site looks ridiculously sexy. Thanks!

Mark Taylor 1 December, 2010

I am running Firefox 3.6.12 updated always to the minute. I was still seeing square corners in your examples, so again I reinstalled the last version. Reloaded the page and here is when the weird thing happens: for an eye blink of a second, the rect-angles did acquire the round and ellipse corners before going back to be square corners!

Ben 17 December, 2010

Hey I just wanted to tell you that this also works on Internet Explorer 9 now since they added CSS3 to it! Just use the property "border-radius" and it will now work in ie 9+ (only).

Scott Gale 31 December, 2010

Here is a great example of how this can be used: scottgale.com/blog/css3-rounded-corners-slideshow/2010/02/19/

Todd 29 January, 2011

It just really drives me nuts the -moz corners are only visible in Firefox, but not IE. OH WELL! Too bad, I used Firefox, and so does 41% of my visitors, so that's that, I guess

Web Experience, - Brett Melton 5 March, 2011

I wish that all browsers could cooperate together. I have used CSS3 for several months now and agree that the best practice is to use all three: -moz, -webkit, and regular CSS2.1 when adding specific styles.

Both Safari and Firefox 4 (Beta) no longer require the vendor-prefix, so soon you will just need the one border-radius setting. It also works in Opera and Internet Explorer 9

Shane Oakley 16 March, 2011

Still no advanced CSS3 support in the new Internet Explorer 9, despite it supposedly supporting CSS3. My website uses quite a few moz and webkit elements for rounded borders and gradients, all missing when viewed with the new IE9. Will they ever get it right?

Some CSS3 styles are supposed to work - including rounded corners. Are you specifying them in the CSS with no prefix (i.e. border-radius:)?

Cyprus Property News 17 March, 2011

It is frustrating but i suggest you just get on with coding and dont worry too much, honestly most people will never know and lets face it its the browsers fault that they dont understand border radius etc....get the basics spot on and forget validating so much!

tamal 6 September, 2011

can you tell me its not been validated at w3 can any one please tell me how can i do that ?
i want some of my image to transform in degree and not been validated by w3
sorry for my poor English hope u understand.

The W3C and other validators only test against the official CSS specifications. They won't validate vendor-specific properties. More details here.

sonu 13 September, 2011

hello sir
your script is not working in IE 9,7,6 so please solution to me.
i like the working on Firefox and chrome

Subhash Patidar 9 November, 2011

Hi Dear,

I liked your script but it is not working in IE version

so please if u have any solution then please post your comments ...

thanks
Subhash

Marcel 20 February, 2012

@sonu
border-radius works fine in IE9, been using it massively on www.appwereld.nl
IE7,6, etc aren't things I'd be concerned about lol. Only issue might be it's not working in IE8

NYinker 3 April, 2012

Nicely done

If images is all I need I go for GD library, go and check out demo at labs.greeni.pl/mini/

Sepatu Futsal 21 May, 2013

Thanks for this nice tutorial. I have just know that we can rotate the element with css. Keep posting. But I have problems with IE8 border radius. It doesn't work. How can I fix it?

cheryl 7 July, 2013

I got it to work on IE9 - pasted the code in this article - wasnt working. Then on another website I found out that if will not work if you do not have correct meta in your head tags:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Applied it and it worked!

A valid DOCTYPE at the top of the page may have the same effect.

Ian Favell 27 July, 2013

1) In Opera the border-radius works when the property is applied directly to the image, whether using in-line CSS, internal CSS (between head tags) or with external CSS. 2) The border-radius is also correctly rendered for CSS-generated images, such as on my website’s tabbed navigation menu and the backgrounds to the numbers in the website's pagination menu. When, however, the property is applied to a DIV it DOES NOT work correctly, as can be seen in the image gallery of the website I created for my web-design tutorial; in Opera , the border-radius on the gallery images works in part, presumably for the div to which it is applied, whilst the square corners of the image remain in place, much as you would see in the other browsers if the 'overflow:hidden' were not being used.

Working with Firefox, Chrome and Opera, I tried to give Opera a different border-radius value to the other browsers such that it would display proper square corners whilst leaving Firefox and Chrome with rounded corners. Using the -webkit- and -moz- prefixes for Chrome and Firefox respectively I was partially successful: I got the square corners for Opera, the rounded corners for Chrome, but lost the rounded corners in Firefox; evidently, Firefox no longer recognizes the -moz- prefix (according to someone on the web this stopped working for him with Firefox 13.0). The in-line CSS solution would deprive one of significant control when applying the border-radius to a large group of images.

Do you know if a solution exists for this circumstance without resorting to something like javascript (I tried the jquery corners option, but this did not work as it assumes Opera supports the native CSS border-radius)?

Send Feedback

Use this form to send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

CAPTCHA refresh

<- copy the digits from the image into this box

press Esc or click outside this box to close

Load Feedback Form

top