Grow your CSS skills. Land your dream job.

Last updated on:

Rounded Corners

Standard:

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

Individual Corners:

-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;

Shorthand:

-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

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

Elliptical Rounding (Firefox 3.5+):

-moz-border-radius-topleft: [horizontal radius] [vertical radius];

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

Elliptical Rounding Shorthand (Firefox 3.5+):

-moz-border-radius: [horizontal radius] / [vertical radius];

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

Above is the same as:

-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 Elliptical Rounding

All corners:

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

Right corners only:

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

Reference URL

Comments

  1. 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;

  2. Permalink to comment#

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

    • Permalink to comment#

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

    • 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

    • JC

      He’s saying IE doesn’t do this. Because IE is a horrible waste of existence.

      If people are using IE and want a better looking internet experience, that should be reason enough to upgrade to a current browser. And for the few people who physically cannot upgrade due to work restrictions, then they need to be doing work not looking for pretty websites.

      As a community we need to stop spending valuable time catering to a browser that refuses to play nice with the rest of the group. Eventually they will get the hint and catch up or die off, either way the internet will improve.

    • Exactly what JC said. IE is that little kid eating paste in the back of the class room… Just leave him alone to do what he’s doing.

      The sooner we stop catering to IE, the sooner Microsoft will start developing browsers which can keep up, or just stop developing them all together. Do what you can to get your content layout legible, and forget the design with IE because it’s a waste of time.

    • Random
      Permalink to comment#

      “IE is that little kid eating paste in the back of the class room.” That is just effin’ hilarious!! LMAO!

    • Jennifer
      Permalink to comment#

      I disagree with saying that web designers need to stop catering to ugly browsers. I’m designing a site for a doctors office that caters to an age group that primarily uses IE. Just because their audience doesn’t choose a better browser doesn’t mean that I shouldn’t spend the time and effort to give them a well-designed product.

    • Gwidaz
      Permalink to comment#

      Is somebody still using IE???? Weirdos…

    • You can use PIE.js to get rounded corners in IE Browsers.
      PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:

      1) border-radius
      2) box-shadow
      3) border-image
      4) multiple background images
      5) linear-gradient as background image

  3. 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.

    • Permalink to comment#

      Thanks for the JavaScript succession, hope it will work in IE6 :)
      I heared there is jQuery for teh same ??

  4. aurel
    Permalink to comment#

    so what is more preferred this or the image style

    • John
      Permalink to comment#

      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.

  5. Permalink to comment#

    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?

  6. Theresa
    Permalink to comment#

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

    • Permalink to comment#

      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!

  7. Permalink to comment#

    great and simple!

  8. Simon
    Permalink to comment#

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

    Can’t seem to get it to work.

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

      That said its very east to do in photoshop.

    • Porpoise
      Permalink to comment#

      Or you could put the image inside a

      <

      div> and round the corners on that (overflow:hidden)

  9. Permalink to comment#

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

  10. Rolande
    Permalink to comment#

    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.

  11. 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.

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

  13. Permalink to comment#

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

    • Bad Boy
      Permalink to comment#

      Any way I hate IE…..

    • Cris70

      That’s not what I’m seeing here. IE v9.0.8112.16421 and still no curvy corners.
      Fortunately I don’t use IE, I just check it for compatibility.

  14. Permalink to comment#

    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?

  15. What would be the best method to implement rounded corners on nav items via CSS3, and have them work in IE as well? Progressive enhancement will not work, since the rounded corners will be for the nav items, and essential to design.

    Should I just opt for image replacement for all browsers, or could I use CSS3 and then a specific style-sheet for IE using image replacement?

    Thanks!

  16. Permalink to comment#

    Thaaanks,,,
    It has helped me a lot,,,
    I tried using the images but i don’t like the use of it.

    Thaaanks….

  17. Thanks for another great snippet. This inspired me to care about other browsers a bit more.

  18. Permalink to comment#

    Why can’t IE support this and make everyone’s life easier? I hate having to style something then figure out how to fix it in IE!! People, use firefox instead to make things easier on designers :)

  19. mred
    Permalink to comment#

    the -khtml is missing, with it you can have rounded corners everywhere except IE, who does not deserve it!

    http://it-things.com/index.php/2011/03/pure-css-rounded-corners-no-images/

  20. Permalink to comment#

    Awesome articles and blog theme.

  21. It’s is my first time to your blog,Fantastic post! You’ve created various quite helpful statements and I appreciate the time you’ve taken within your producing. It’s clear to see that you purely have an understanding of what you are speaking about. I’m researching onward to studying a lot more of your websites website content. Thank you!

  22. Yes this Pure CSS rounded corners but the major issue is with Internet Explorer 6, 7 and 8. This is why this is a headache to web designers often. But some people have just written an htc file on javascript which can be linked in just as you put background image. just put that htc file in place of background image. This will work on IE too.
    Here is the way to do
    .rounded-corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    behavior: url(border-radius.htc);
    }

    This method works most of time…but some webhosts may not supports htc. But its not fault of this method, its webhosts. But majority of people can now create rounded corner in pure CSS with cross browser compatibility.

    • Ooops i forgot something on my old comment.
      Use this path instead because border-radius.htc works bit differently than images.

      behavior: behavior: url(/css/border-radius.htc);

      You should also not forget that any thing with border-radius.htc you should put position: relative.unless there is already a position.

      and for best result use same border radius to all corners.

      and never use border-radius.htc with another IE hack.

  23. Permalink to comment#

    IE will have to adapt the rules of css3 otherwise they will be wiped out by other browsers. excellent article. thanks.

  24. shantanu
    Permalink to comment#

    Does it support on hover rounded corners. thanks

  25. jamescool
    Permalink to comment#

    Check this URL below. this solves the problem with ie in connection to this article.

    http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

    cheers!

  26. kalloo
    Permalink to comment#

    “border-radius.htc” helps to set border radius for div in IE, but I want to set border radius for images in IE

  27. Just adding my two cents on the let’s stop catering for the little guy in the corner. That’s IE in case you missed the comments about it.

    Moving the web forward and stop wasting valuable finite time.

  28. Angie
    Permalink to comment#

    Yeah IE bashing is my favorite passtime too. But as webdesigners you all should also get off your high horses quickly.

    My company develops a webshop for a certain b2b branch where IE7 and IE8 are still the most widely used browsers among companies and shops ordering from this webshop.

    These end-users mostly can’t even update to IE9 due to WinXP or lack of administrative rights. Getting these end-users to install FF or Chrome is up to our customer, ie the webshop-owner, and it has proved difficult. Many end-users are web- and computer illiterates basically.

    We dropped IE6 support last year, and are starting to only support IE7 in basic ways (no alt. css for rounded corners, they can have their divs, inputs and buttons fair and ‘especially’ square). IE8 will still be with us for years to come however. And IE9 doesn’t support css3 gradients for shit too.

    Often we don’t have much of a choice when our customers want to make money from our carefully designed web products… Money makes the world go round remember!

  29. Ashok
    Permalink to comment#

    it vl not work in IE browswers
    so please provide a code for rounded corners should also work in IE

  30. Santa BOgdan Ionut
    Permalink to comment#

    Just use <—< or <–< this will do the trick

  31. Santa BOgdan Ionut
    Permalink to comment#

    Just use !DOCTYPE html or meta http-equiv=”X-UA-Compatible” content=”IE=edge” this will do the trick

  32. Hey, didn’t worked on the template of my wordpress blog. Please tell me what to do.

  33. Reno

    The only think IE is good for is download Google Chrome & Firefox, so you can actually use and experience the internet ;-)

  34. Thank you, the roundered corners worked perfectly!

  35. Thank you for the great tutorial.

    Is border-radius now the standard that is supported across browsers? Somehow the code given in the tutorial did not work for me in Firefox but when I try border-radius it works for me!

    Thanks anyways for the tip.

  36. Wonderfull and nice tutorial. it help me a lot to rememebr short code
    border-radius: top right bottom left ;

    Thank u sir

    thanks a lotssssssssssssssssssssssssssssssssssss
    i learn a lots from your webiste of css. i have a request can you please make a tutorial of mobile css

  37. Hello sir,
    How it is possible to the the given code,

    <html>
        <head>
               <style type=’text/css’>
                   ul li a {
                   width: 100px;
                   display: block;
                   text-decoration: none;
                   -moz-box-shadow: 2px 2px 4px #888;
                   -moz-border-radius-right: 10px;
                   }

                   ul li a:hover {
                   background: #ebebeb ;
                   color: #67a5cd;
                   padding: 7px 15px 7px 30px;
                   }

               </style>
        </head>
        </body>
               <ul >
    <li><a href=”#”>nidhi</a></li>
    <li><a href=”#”>C++</a></li>
    </ul>
    </body>
    </html>

  38. Dear Nidhi, do let me know which kind Navigation do u want
    Horizonta or Vertical

  39. Vishwa
    Permalink to comment#

    I need border radius for ie-7 to above pls help me

  40. Permalink to comment#

    Thank you for this tutorial, but we need one for Internet Explorer 7 and 8 if possible :) could you help please?!

    Thanks
    Quran

  41. Permalink to comment#

    This tutorial are really helpful. Thanks a lot!

  42. MikeMac
    Permalink to comment#

    Some really inane and juvenile comments her in regards to IE. Explorer is still the main choice browser for most enterprise level web sites and applications. To dismiss it in such a fashion is an indication of naivete. If I were to turn up at a meeting with one of my major clients, a multinational news agency, and inform them that they can’t have what they want unless they change to a “decent” browser they would terminate my contract and go to a grownup resource who could supply a design and development solution to suit their incumbent enterprise-wide software choices be that IE7 or any other browser solution.

    I love this site for it’s insights and helpfulness but I wonder if some of these commentators have ever had work in the real world.

    • creem
      Permalink to comment#

      in your parallel universe i guess.

      Browser stats say it all. Also the actual numbers of IE users are lesser than the stats 4 various reasons. IF IE was not installed with the OS no one wud ever use it.

      I refused my client support on IE, I challenged them to find anyone who could maintain the design and also make it work in IE 5, 6 and pixel perfect in 7 without javascript(which many a time is disabled for many users who use lower than 7 cause they are too dumb to upgrade the OS and they set the security high to make up for and that disables javascript)

      I forgot to mention why i refused they wanted IE compatiblity without paying extra. I can make anything compatible use javascript or load a dedicated style sheet for each version of IE but you gotta pay me.

      no company will pay you for that, its only when you speak money they decide to let it go.

      The only juvenile is you, I think ur either offering IE compatibility for free or u must be making very simple text and graphic websites in front page

    • Joe Schloe
      Permalink to comment#

      Anyone who tells multi-national enterprise level clients they won’t support their IE base is removing themselves from the world of enterprise level development. They can stick to local fishmonger and beauty consultant sites and leave the arena for professionals who deal in multi-device, multi-platform online presence. Just my two cents.

    • MikeMac
      Permalink to comment#

      @Creem – As proven. Naive and juvenile.

      If you don’t have the skillset to support all browsers you are only half a craftsman.

      If your clients are not willing to pay you have the wrong clients.

      If your clients are prepared to be dictated to by a web developer neither of you are serious in your endeavours.

      My business has a major international news agency client with employees in excess of 15,000 desks using Sharepoint backend, IE browsing and cloud applications. Do you have the slightest clue how much it would cost them to change their system in both monetary terms and disruptive upheaval because the web guy doesn’t support it?

      You might not like the term “naive” but we are what we do.

  43. Jagatheesh
    Permalink to comment#

    this is not working in ie8

  44. Kally
    Permalink to comment#

    great tut

  45. Sanjeev
    Permalink to comment#

    Hi,

    We are developing Java Application with angularjs. Rounded corners are not working in IE8, I used PIE.htc , that time some dynamic data is not working its showing errors in a page, i think the problem is angularjs. also rounded corners are not working in dynamic content div’s. in static content div’s are working rounded in iE also.

    Can you help on this issue.

    Thanks & Regards,
    Sanjeeva

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".