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. User Avatar
    Hilbrand Edskes
    Permalink to comment#

    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;

    • User Avatar
      vikram
      Permalink to comment#

      Thnk u,it helped me alot.How about opera browser.Will this work?

  2. User Avatar
    Prem
    Permalink to comment#

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

    • User Avatar
      Prem
      Permalink to comment#

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

    • User Avatar
      Andrew Pryde
      Permalink to comment#

      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

    • User Avatar
      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.

    • User Avatar
      Nick Burd
      Permalink to comment#

      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.

    • User Avatar
      Random
      Permalink to comment#

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

    • User Avatar
      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.

    • User Avatar
      Gwidaz
      Permalink to comment#

      Is somebody still using IE???? Weirdos…

    • User Avatar
      vandhana
      Permalink to comment#

      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. User Avatar
    Hilbrand Edskes
    Permalink to comment#

    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.

    • User Avatar
      Duke
      Permalink to comment#

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

  4. User Avatar
    aurel
    Permalink to comment#

    so what is more preferred this or the image style

    • User Avatar
      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. User Avatar
    Robin
    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. User Avatar
    Theresa
    Permalink to comment#

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

    • User Avatar
      Alex
      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. User Avatar
    george
    Permalink to comment#

    great and simple!

  8. User Avatar
    Simon
    Permalink to comment#

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

    Can’t seem to get it to work.

    • User Avatar
      Chris

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

      That said its very east to do in photoshop.

    • User Avatar
      Porpoise
      Permalink to comment#

      Or you could put the image inside a

      <

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

  9. User Avatar
    marco
    Permalink to comment#

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

  10. User Avatar
    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.

    • User Avatar
      Sebastian Bourges

      This is the best solution. Thank you very much for sharing this.

  11. User Avatar
    Chris

    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. User Avatar
    Extend Studio

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

  13. User Avatar
    Rafael
    Permalink to comment#

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

    • User Avatar
      Bad Boy
      Permalink to comment#

      Any way I hate IE…..

    • User Avatar
      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. User Avatar
    Steve
    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. User Avatar
    Jon Yablonski
    Permalink to comment#

    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. User Avatar
    Nicky
    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. User Avatar
    Professor WordPress
    Permalink to comment#

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

  18. User Avatar
    Patti
    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. User Avatar
    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. User Avatar
    Minhas
    Permalink to comment#

    Awesome articles and blog theme.

  21. User Avatar
    Sunni Tresca

    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. User Avatar
    RetinaWeb
    Permalink to comment#

    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.

    • User Avatar
      RetinaWeb
      Permalink to comment#

      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. User Avatar
    helpaloan
    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. User Avatar
    shantanu
    Permalink to comment#

    Does it support on hover rounded corners. thanks

  25. User Avatar
    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. User Avatar
    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. User Avatar
    Pedro Matias
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    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. User Avatar
    Santa BOgdan Ionut
    Permalink to comment#

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

  31. User Avatar
    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. User Avatar
    Aman Singh@seoinsiter
    Permalink to comment#

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

  33. User Avatar
    Reno

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

  34. User Avatar
    Kamal

    Thank you, the roundered corners worked perfectly!

  35. User Avatar
    Pali Madra
    Permalink to comment#

    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. User Avatar
    Shahbaz Ahmed Bhatti
    Permalink to comment#

    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. User Avatar
    NidhiLive
    Permalink to comment#

    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. User Avatar
    Shahbaz Ahmed
    Permalink to comment#

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

  39. User Avatar
    Vishwa
    Permalink to comment#

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

  40. User Avatar
    Quran
    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. User Avatar
    hary
    Permalink to comment#

    This tutorial are really helpful. Thanks a lot!

  42. User Avatar
    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.

    • User Avatar
      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

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    Jagatheesh
    Permalink to comment#

    this is not working in ie8

  44. User Avatar
    Kally
    Permalink to comment#

    great tut

  45. User Avatar
    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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag