The CSS3 border-radius property

The CSS3 border-radius property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS - no images needed.

Cross-browser compatibility

CSS3 aren’t supported by all browsers yet. The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10).

Since CSS3 aren’t standard yet, you must add prefixes to border-radius in order to work with the browsers that support it. If you want to work it with Firefox, you must write -moz-border-radius in the CSS; if you want it to work with Safari/Chrome, it’s -webkit-border-radius.

Note that although Firefox, Safari and Chrome support this property, they do so in slightly different modalities. For the sake of simplicity, I’ll first show you how it is supported by Firefox and then explain the differences in Safari and Chrome.

The box

Let’s start by creating the box we will experiment the border-radius property with. In the HTML we simply build an empty box:

<body>
<div id="box"></div>
</body>

In the CSS, we give it a width, a height and a background color:

#box {
   width:590px;
   height:100px;
   background-color:#6B86A6;

Declaring the border-radius property

The border-radius property is declared pretty much like the margin and padding properties. It can be used alone as a shorthand property for all the four angles of the rectangle, or in combination with specific suffixes for each of the four angles.

Declaring the border-radius property as a shorthand property

If used as a shorthand property, assigning just one value will set that value as the radius of each angle: 

#box { -moz-border-radius: 20px; }

With this CSS, all four angles will have a 20px radius:

The CSS3 border-radius property

If you assign two values, the first one will represent the radius of the top-left and bottom-right corners while the second one will represent the radius of the top-right and bottom-left corners: 

#box { -moz-border-radius:20px 40px; }

With this CSS, the top-left and bottom-right corners will have a 20px radius, the top-right and bottom-left corners will have a 40px radius:

The CSS3 border-radius property

You could also assign three values: the first one will be the radius of the top-left corner, the second will be the radius of the top-right and bottom-left corners, the last will be the radius of the bottom-right corner.

#box { -moz-border-radius:20px 40px 5px; }

With this CSS, the top-left corner will have a 20px radius, the top-right and bottom-left corners will have a 40px radius, the bottom-right corner will have a 5px radius:

The CSS3 border-radius property

Your last option is to assign four values - one for each angle - in this order: the top-left corner radius, the top-right corner radius, the bottom-right corner radius, the bottom-left corner radius: 

#box { -moz-border-radius:10px 20px 30px 40px; }

With this CSS, the top-left corner will have a 10px radius, the top-right corner will have a 20px radius, the bottom-right corner will have a 30px radius, the bottom-left corner will have a 40px radius:

The CSS3 border-radius property

Declaring the border-radius property for each angle

If you need to assign the border-radius property to a single angle - maybe to override a previously assigned value - you can do so by adding a suffix to “border-radius” depending on the angle you want to modify.

The suffixes are as follows:

  • -moz-border-radius-topleft for the top-left corner;
  • -moz-border-radius-topright for the top-right corner;
  • -moz-border-radius-bottomright for the bottom-right corner;
  • -moz-border-radius-bottomleft for the bottom-left corner;

So if for example you only want to round the top right corner: 

#box { -moz-border-radius-topright: 30px; }

Here is what you’d get:

The CSS3 border-radius property

The horizontal radius and the vertical radius

I have so far made examples that assumed that we want each angle to be a perfect quarter circle, so that I could focus on showing you the basic syntax of the border-radius property. But with CSS3 you can also have quarter ellipses rather than quarter circles.

Let’s round the top-left corner of our box with the following CSS code: 

#box { -moz-border-radius-topleft: 30px; }

Here is what we get:

The CSS3 border-radius property

The top-left corner is a perfect quarter circle. But let’s add a second value to the above CSS code: 

#box { -moz-border-radius-topleft: 30px 15px; }

The CSS3 border-radius property

You can see the top-left corner is now a quarter ellipse. This is because the two values represent the horizontal radius and the vertical radius of the angle respectively. When using one value, the browser interprets that value as assigned for both the horizontal and vertical radii, and therefore renders a quarter circle.

The radii with the shorthand property

How can we declare different values for the horizontal and vertical radii when we use the shorthand property though? Enters the slash. Look at the following CSS code: 

#box { -moz-border-radius: 30px / 15px; }

In the above CSS code, the first value works as the horizontal radius of each angle, while the second works as the vertical radius.

The CSS3 border-radius property

The syntax to declare all the other forms of shorthand properties follows the same logic. If we wanted to use different values for both the horizontal and vertical radii of each angle, we would write the following CSS code: 

#box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }

Here is the result:

The CSS3 border-radius property

Why would you ever want such a rectangle is beyond me ;) But my job here is to present you with all the possibilities. The rest is up to you!

What about Safari and Chrome?

As pointed out at the beginning of the tutorial, everything as described so far works in Firefox, while Safari and Chrome currently use a slightly different syntax (by currently I mean July 13th 2009).

Declaring the border-radius property for each angle in Safari and Chrome

The formulas used to declare the border-radius property for each angle are different in Safari and Chrome. Here they are:

  • -webkit-border-top-left-radius for the top-left corner;
  • -webkit-border-top-right-radius for the top-right corner;
  • -webkit-border-bottom-right-radius for the bottom-right corner;
  • -webkit-border-bottom-left-radius for the bottom-left corner;

Note that Safari and Chrome use the same syntax suggested in the W3C CSS3 Working Draft.

Using the shorthand property in Safari and Chrome

Safari and Chrome only support the possibility to declare one value for all the four angles. If you want to assign different values to one or more angles, you’ll have to do so by using the specific properties for each desired angle (as listed above).

The following shorthand property to assign different values for the four angles doesn’t work in Safari/Chrome:

#box { -webkit-border-radius: 10px 20px 30px 40px; }

To get the desired effect, you should change the CSS as following:

#box {
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 20px;
   -webkit-border-bottom-right-radius: 30px;
   -webkit-border-bottom-left-radius: 40px; }

Horizontal and vertical radii in Safari and Chrome

Safari and Chrome support the possibility to assign different radii with specific-angle properties. To make the top left corner a quarter ellipse, you should use the following CSS code: 

#box { -webkit-border-top-left-radius: 30px 15px; }

As to shorthand properties, the only case Safari and Chrome allow for assigning a vertical radius is when all the four angles have the same value. Besides, the syntax doesn’t require a slash; it’s enough to write the two values consequently: 

#box { -webkit-border-radius: 30px 15px; }

The above CSS code results in the following image:

The CSS3 border-radius property

Attention, please

I found out about Safari and Chrome inconsistencies by trying different CSS codes - not reading about them somewhere - so I might have made some mistakes. If you actually spot any inaccuracy, please contact me and I’ll correct the tutorial.

What can apply the CSS3 border-radius property to?

The answer is: everything. All border-related properties are applied to the boxes each HTML elements is included in according to the CSS box model. Therefore you can apply border-radius to menus, paragraphs, images, lists, etc. In the following images there are three examples: a paragraph, a menu with rounded links, and another paragraph with a border. Note how the border gets rounded, too:

The CSS3 border-radius property

So, what do you think?

Are you excited about creating rounded rectangles just with CSS? Have you used the border-radius property already? Share your thoughts in the comments!

Pubblicato in CSS3, Tutorials.
Tags: , , , , , ,

47 Responses

    • Mike Brisk

    • I totally love CSS3 border radius. I used it on my iphonepixels.com and palmprepixels.com for the gallery images and in the palmprepixels header slideshow to make the images round to match the palm pre phone. Love it!

      July 16, 2009 at 8:54 pm

    • Jason Grant

    • I love these properties. They are especially useful for prototyping purposes when I want to check how something will look without having to mess around in photoshop to create relevant image files. Saves time and hassle.

      July 17, 2009 at 2:06 pm

    • Robert

    • AH! Brilliant tutorial. It’s about time I learned this stuff…

      July 20, 2009 at 1:35 pm

    • Michael Combs

    • Palm Pre does not support box-shaddow or clipping of border-radius in any derivation. When I say clipping of border-radius I am talking about placing a background image in the div and telling the browser to give it a derivation of 20px and it rounds the corner. Ironically it understands what you are doing because if you give it a border, it draws that.

      The Palm Pre is a great iPhone copy cat browser, but they totally cut corners ignoring box-shaddow and border-radius because both iPhone and Android support it.

      If anyone has any Palm Pre style questions shoot me an email at my website, http://www.combsconsulting.com

      July 20, 2009 at 11:42 pm

    • grazz

    • @jason I agree, they can be very useful for that too.

      @robert Thanks Robert, I hope this helped ;)

      @micheal Wow Micheal, thanks for sharing how this property works on the Palm Pre too.

      July 21, 2009 at 9:19 pm

    • pig1000

    • Didn’t know this was available - fantastic to have stumbled upon it! Great explanation, I’ll definitely be using it!

      Typical IE is lacking once again!!!

      July 24, 2009 at 7:58 pm

    • dottorgonzo

    • complimenti… per il post e per il blog.

      July 24, 2009 at 9:15 pm

    • Carson Shold

    • Oh wow, I can’t wait until this gets supported by all browsers in a similar way! CSS3 all the way.

      July 25, 2009 at 3:19 am

    • grazz

    • Thanks for all the comments, I really appreciate it ;)

      July 25, 2009 at 5:36 pm

    • Barbara Henley

    • I haven’t tried it yet, but am excited to try. I am only just now learning HTML/CSS and I am doing so on my own with no one to ask questions to! I had just finished a practice project and was researching how to do the rounded corners. Everywhere I looked they said the only way was with images, but didn’t say how to apply the images.
      I was getting very frustrated-worked on this day and night for 3 days straight(literally), and had decided it was too advanced for me. Just then I noticed I had an email, when I checked on it, the email was from StumleUpon. When I opened it–there was your tutorial!!!! I am writing this 5 minutes after reading my email.
      I use both Firefox and Chrome-can’t decide-so I guess I will have to use both. I don’t have a web page, just one with-in my computer, but the good part is, I have hundreds of different fonts, so I get to play with those and I wouldn’t be able to do that with a real web page.
      Although I haven’t applied this yet, I want to give you a heartfelt THANK YOU now.
      May God bless you many times over for sharing this!

      Barb

      July 26, 2009 at 4:06 am

    • grazz

    • Wow Barbara, I’m glad I helped you out. You’re welcome!

      July 26, 2009 at 9:44 am

    • bart

    • Nice clear tutorial.
      Smething that bugs me though, how can i already use this in my designs? IE still has a big market share and will ruin my design if I use this property. And most of my clients use IE, because it comes with Windows.

      July 26, 2009 at 8:54 pm

    • grazz

    • Hey Bart,

      you certainly made a point but I don’t think it’s necessary that a website looks exactly the same in every browser. Suppose you used the border-radius property to round a textarea field corners: it’s no big deal if Windows users can’t see them, the point is you enhanced the experience for Firefox/Safari/Chrome users. Windows users will still be able to type into that field. It’s not about taking something away from IE users, it’s about giving something more to modern browsers users. Plus you get to practice for when IE will be finally ready for CSS3 too!

      July 26, 2009 at 9:12 pm

    • Jason

    • I have been using the normal -border-radius property for a project I am working on whcih luckily is only for FF bein an internal application and thought this article was going to be impressive.

      I thought I had learnt something new with the different angles option being 1px 1px 1px 1px / 3px 3px 3px 3px for example.

      I tried it and I get nothing in FF. I further noticed your examples are images which leads me to believe that these properties aren’t valid or don’t work anyway.

      Do you have, or has anyone else, got any real live examples of the different angles working ona website?

      Would love to see some.

      Thanks for the extra advice, if it works.

      July 30, 2009 at 2:31 pm

    • Graham

    • Very very cool!
      I only wish that IE would come to the party.
      I would definately use this feature.

      Thanks for sharing.

      July 30, 2009 at 3:00 pm

    • devolute

    • A great round up of all we need to know about border-radius. Apart from how to accomplish a similar effect in IE of course, but then that’s a whole new blog post (or ten)!

      July 30, 2009 at 3:12 pm

    • Tony

    • Neat. I wish they all used the same property names… Hopefully in the future.

      July 30, 2009 at 4:03 pm

    • stk

    • I believe that it is misleading to say that FireFox, Safari and Chrome support this CSS3 property. They only support proprietary versions (hence the need to add the “-moz-” & “-webkit-” prefix to the actual CSS3 directive).

      Also, according to Mozilla Development Centre, support for this proprietary directive has existed since FireFox version 1.0 (not 3.0) and Safari 3.0 (not 3.1).

      As a aside, I am a tad disappointed to learn that no browser supports this CSS3 implementation of this this feature, as presented in the CSS3 Working Draft. I tend to utilize proprietary directives only for achieving cross-browser compatibility (i.e., Internet Explorer alpha-filter for transparency) and not for special browser-specific features that aren’t supported in other browsers.

      While I have no problem showing visitors using FireFox, Chrome or Safari nice rounded boxes (and leaving IE looking boxy), I’d like - at least - to utilize valid and standardized code.

      Cheers,
      -stk

      July 30, 2009 at 4:49 pm

    • Nuno Mestre

    • Such an helpful new property. Its a shame that isn’t supported in all browsers, but hope that will be in time.

      July 30, 2009 at 4:59 pm

    • Scott Phelps

    • To future proof you CSS you should include the CSS3 property first, then follow it by the -namespace properties.

      And do not forget to makes comments in the CSS when using special -namespace properties. You may know what it is, but when someone looks at it five years from now, they may not. (and hopefully they can delete it as well!)

      I personally choose this bit of formatting so I can immediately see them in context. This applies to any -namespace property for that matter.

      .box {
      border-radius: 5px;
      -moz-border-radius: 5px; /* firefox ext */
      -webkit-border-radius: 5px; /* safari & chrome ext */
      }

      And if I’m not mistaken, the newest release of Opera (10 beta) supports border-radius.

      July 30, 2009 at 5:07 pm

    • grazz

    • @Jason - Hi Jason, I’m sorry this property isn’t working for you but I can guarantee it does work. I didn’t draw the images, those are screenshots of live examples. Are you sure that you have the latest version of Firefox (3.5)? And that your CSS is correct? I hope you’ll finally make it using it. Good luck!

      @graham, @devolute, @stk and @nuno mestre - Border-radius not working in IE is a bit of a pain but I don’t think this should keep web designers from using it. I think it’s OK that a website looks a bit different in different browsers as long as such differences don’t harm the user experience.

      @scott phelps - Thanks for the tips, Scott!

      July 30, 2009 at 8:53 pm

    • links for 2009-07-30 « James A. Arconati

    • [...] The CSS3 border-radius property « Blogging CSS One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed. Cross-browser compatibility [...]

      July 31, 2009 at 5:30 am

    • Jason

    • @grazz - Thanks for the update. I am indeed using the wrong FF (3.0.1). I do have FF 3.5 on virtual box. I shall test it on there and get back to you as to whether it worked for me or not.

      If what I want to do with it works, then I shall take some screenies for you to post. I hope my experiment achieves what I want it to. Shoudl be interesting but not going to let you in on it quite yet.

      Thanks again.

      July 31, 2009 at 12:18 pm

    • links for 2009-07-31

    • [...] The CSS3 border-radius property « Blogging CSS One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed. (tags: css tutorial design web programming) Compartilhe essa página: [...]

      July 31, 2009 at 2:02 pm

    • Twitted by Pudny

    • [...] This post was Twitted by Pudny [...]

      July 31, 2009 at 3:24 pm

    • tudor moldovan · blog personal

    • [...] CSS Clip pentru decuparea imaginilor cu CSS – foarte util Tutorial – Margini rotunde cu CSS3 Harta Clujului pentru iPhone Apple tablet se lanseaza in septembrie The Expendables (2010) – [...]

      August 3, 2009 at 3:25 pm

    • FireDart

    • If you want Corners to work in IE and Opera too try using Curvy Corners from:
      http://www.curvycorners.net/

      It uses JavaScript for browsers that don’t use Border-Radius to make rounded corners on box’s that have the border-radius code assign to them(like moz-border-radius and webkit-bborder-radius) and browsers that do support Border-Radius it ignores the JavaScript!

      It’s a great script.
      -FireDart

      August 3, 2009 at 4:46 pm

    • Kolyan

    • All my thanks to the author.
      Jesus with rusty Shmeisser! It took such a long time for those potheads to figure this out. Vector bezier tool has been in use since when? Right before Adobe “shared” it out from Macromedia?

      I am sure it does intensifying and “easyfying” workload for a UI design but how smooth does it go behind the scene?

      It’s surely a lot simpler to specify “radius” but something has to draw the curve, right?
      As everyone knows from Flash experience it is not always recommended to do majority of graphics via AS programming.
      Kinda curious.
      But with constant growing engine’s horsepower it might not be an issue at all.

      August 4, 2009 at 5:25 am

    • eneko

    • Love it :)

      August 4, 2009 at 1:45 pm

    • Lee

    • What’s up with Chrome’s ability to render css3 rounded corners? It’s terrible. Go to this site with Chrome and look how horrible the corners are:

      http://www.css3.info/preview/rounded-border/

      August 7, 2009 at 6:27 am

    • cssah

    • Awesome css3 tools i’m using it now,but not supported on IE yet

      August 15, 2009 at 7:46 pm

    • devolute

    • Hey, it’d be cool if you updated your post. border-radius works in Opera now, so we should use that too (and because future browsers may very well use that instead of just with -moz and -webkit extensions)

      January 11, 2010 at 5:46 pm

Newer Comments »

Leave a Reply