Rounded Corners

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

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

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;

-moz-border-radius: 10px 20px 30px 0;

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

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

-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;

-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;

-webkit-border-radius: 36px 12px;

-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;

21 Responses

1. Hilbrand Edskes says:

   09/06/2009 at 2:18 am

   Thank you for including my additions. Some more additions:

   Elliptical rounding:-webkit-border-top-left-radius: 10px 40px;
   Elliptical rounding shorthand:
   (notice: no slash)-webkit-border-radius: 10px 40px;

   Reply
2. Prem says:

   09/14/2009 at 11:06 am

   this is not compatible for IE browsers. Can u help me fix

   Reply
   • Prem says:

     10/02/2009 at 2:03 pm

     I did not still get answers to my question. This code is not compatible for IE browers

     Reply
   • Andrew Pryde says:

     01/31/2010 at 5:30 am

     All versions to date of IE don’t support any CSS3 so you will either have to just employ progressive enhancement (i.e. decent browsers get rounded corners IE does not) or use images and or javascript to round your corners.

     @Prydie

     Reply
3. Hilbrand Edskes says:

   09/17/2009 at 9:46 am

   Opera doesn’t support border-radius yet either.
   You can make it work by including CurvyCorners:
   Then border-radius will also work in Opera and IE 4.0(!) and newer.

   Reply
4. aurel says:

   09/26/2009 at 5:21 pm

   so what is more preferred this or the image style

   Reply
   • John says:

     10/06/2009 at 1:36 am

     This (with or without CurvyCorners depending on the browsers you want to support).

     Creating images for round corners is more work, more http requests and more bandwidth then using border-radius.

     Reply
5. Robin says:

   10/11/2009 at 1:46 pm

   I really hate the rounded corner issue in IE and other browsers with a lack of descent CSS support.

   Is there a nice and clean method that will work in all the browsers? Preferably a jQuery plugin?

   Reply
6. Theresa says:

   10/21/2009 at 9:05 am

   Only problem is that the CSS will not validate at the W3C CSS Validation Service.

   Reply
   • Alex says:

     02/05/2010 at 4:09 pm

     I think we’re beyond anybody really caring about validation as the CSS 2.1 spec has not even been properly supported. Ignore validation until then point where there is a definitive spec to actually validate against!

     Reply
7. george says:

   01/25/2010 at 8:57 am

   great and simple!

   Reply
8. Simon says:

   04/08/2010 at 4:20 am

   Is it true, that Firefox ignores rounded corners on images?

   Can’t seem to get it to work.

   Reply
   • Chris says:

     05/12/2010 at 12:30 pm

     Yes, firefox has no support for rounded corners on images, yet.

     That said its very east to do in photoshop.

     Reply
9. marco says:

   04/20/2010 at 10:02 am

   Safari requires more than shorthand if you want differing corner radii. You have to write out each unique corner.

   Reply
10. Rolande says:

    04/22/2010 at 2:15 pm

    To get rounded corners to work in IE 6-8 you need an htc file as a work around try this:

    http://code.google.com/p/curved-corner/

    Just download the file and follow the directions and you can integrate it with your current css solutions.

    It can be a little wonky so follow ALL the suggestions and dl the zip file with an example in it if you need to.

    Reply
11. Chris says:

    05/12/2010 at 12:33 pm

    A great way to generate rounded corners is border-radius.com.

    It’s simple to use and generates the css for webkit and gecko proprietary extensions as well as the css3 version.

    You can also set the value of each corner and it’ll spit that code out as well.

    Reply
12. Extend Studio says:

    05/17/2010 at 5:45 am

    You can have a look as well at FlexiPanels CSS – a Dreamweaver extension that creates rounded corner CSS boxes without coding.

    Reply
13. Rafael says:

    08/25/2010 at 7:15 am

    Hey, Opera 10.5+ and Internet Explorer 9.0+ fully supports border-radius!

    Reply
14. Steve says:

    08/31/2010 at 9:29 am

    a noob question, with code like this just where in the css should a person put this type of code o make it work, in the body definition or elsewhere?

    Reply