Rounded Corners


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


-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


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

    • vikram
      Permalink to comment#

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

  2. Prem
    Permalink to comment#

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

    • Prem
      Permalink to comment#

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

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


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

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

    • 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…

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

    • Duke
      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. 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. Theresa
    Permalink to comment#

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

    • 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. george
    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.

    • Chris

      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. marco
    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:

    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.

    • Sebastian Bourges

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

  11. Chris

    A great way to generate rounded corners is

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

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

  13. Rafael
    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. 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. 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?


  16. Nicky
    Permalink to comment#

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


  17. Professor WordPress
    Permalink to comment#

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

  18. 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. mred
    Permalink to comment#

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

  20. Minhas
    Permalink to comment#

    Awesome articles and blog theme.

  21. 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. 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(;

    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.

    • RetinaWeb
      Permalink to comment#

      Ooops i forgot something on my old comment.
      Use this path instead because works bit differently than images.

      behavior: behavior: url(/css/;

      You should also not forget that any thing with 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 with another IE hack.

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


  26. kalloo
    Permalink to comment#

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

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

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

    Thank you, the roundered corners worked perfectly!

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

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

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

               <ul >
    <li><a href=”#”>nidhi</a></li>
    <li><a href=”#”>C++</a></li>

  38. Shahbaz Ahmed
    Permalink to comment#

    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. 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?!


  41. hary
    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#


    We are developing Java Application with angularjs. Rounded corners are not working in IE8, I used , 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,

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.