You can give any element "rounded corners" by applying a border-radius through CSS. You'll only notice if there is a color change involved. For instance, if the element has a background-color or border that is different than the element it's over. Simple examples:

#example-one {
  border-radius: 10px;
  background: #BADA55;
#example-two {
  border-radius: 10px;
  border: 3px solid #BADA55;

It's really not necesssary anymore, but for the absolute best possible browser support, you could prefix with -webkit- and -moz-:

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 

Notice the order of those properties: the vendor prefixes are listed first and the non-prefixed "spec" version is listed last. This is the correct way to do it. Border radius is a particularly good example of why we do it that way. In slightly more complicated version of using border-radius (where you pass two values instead of one) the older -webkit- vendor prefix would do something entirely different than the "spec" version. So if we blindly copy/paste the same values to all three properties, we could see different results cross-browser. Learn more about this scenario. For the most consistency long-term, it's best to list the "spec" version last.

It's pretty realistic these days to drop prefixes and just use border-radius, as discussed here.

If the element has an image background, it will be clipped at the rounded corner naturally:

#example-three {
  border-radius: 20px;
  background: url(bglines.png); /* will get clipped */

Sometimes you can see a background-color "leak" outside of a border when border-radius is present. (see). To prevent this you use background-clip:

.round {
  border-radius: 10px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;

With just one value, border-radius will the same on all four corners of an element. But that need not be the case. You can specifiy each corner separatedly if you wish:

.round {
   border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */

You can also specify two or three values. MDN explains it well:

If one value is set, this radius applies to all 4 corners.
If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
Three values: The second value applies to top-right and also bottom-left.

#example-four {
  border-radius: 5px 20px 5px;
  background: #BADA55;

You may also specify the radiuses in which the corner is rounded by. In other words, the rounding doesn't have to be perfectly circular, it can be elliptical. This is done using a slash ("/") between two values.

#example-five {
  border-radius: 10px/30px; /* horizontal radius / vertical radius */
#example-six {
  border-radius: 30px/10px; /* horizontal radius / vertical radius */

Note: Firefox only supported elliptical borders in 3.5+ and older WebKit browsers (e.g. Safari 4) incorrectly treat "40px 10px" as the same as "40px/10px".

You may specify the value of border-radius in percentages. This is particularly useful when wanting to create a circle or elipse shape, but can be used any time you want the border radius to be directly correlated with the elements width.

#example-seven, #example-eight {
   border-radius: 50%;
#example-eight {
   width: 200px;

Note: In Safari percentage values for border-radius only supported in 5.1+. In Opera, only supported in 11.5+.

Here's each individual property, with vendor prefixes:

.round {
  -webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 4px;

  border-top-left-radius: 1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 4px;

Note: Each of those values can have a space-separated value as well, like "5px 10px", which behaves like a slash-separated value in shorthand (horizontal radius [space] vertical radius).


Here's a little thing to play with the different properties and values:

See the Pen All the border-radius' by Chris Coyier (@chriscoyier) on CodePen.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


  1. User Avatar
    Will Drotar
    Permalink to comment#

    Nice tutorial!

  2. User Avatar
    Rick Snackers
    Permalink to comment#

    Is this up to date? I’m not seeing a post-date anywhere.

    Anyway. Nice tutorial!

  3. User Avatar
    Ram Kannan
    Permalink to comment#

    That was really classy.. Tnx

  4. User Avatar
    Chris Demetriad
    Permalink to comment#

    They are not looking alright at all on Android 2.2 and 2.2.1. The default browser.

  5. User Avatar
    Permalink to comment#

    I indeed absolutely needed some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:

    -webkit-box-shadow: 0 0 1px #000;

    The x and y position of the shadow are 0 so the shadow is centered, all wee need is to adjust the blur value expanding it just 1px (in base of need) above the corner edges making them look smoother. Of course the shadow color must be the same as your rounded element’s background/border-color…

    There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.

    Now, if you are the type of designer that can use small compromises, it should just work for you like this, but if you are a finicking freak like I am, you should absolutely find a way to target your CSS to specific devices.

    At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least preventing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:

    @media only screen and (-webkit-device-pixel-ratio:.75){
    /*for low density (ldpi) Android layouts */

    @media only screen and (-webkit-device-pixel-ratio:1){
    /*for low density (ldpi) Android layouts */

    @media only screen and (-webkit-device-pixel-ratio:1.5){
    /*for low density (ldpi) Android layouts */

    Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer ;)

  6. User Avatar
    Do choi phong the
    Permalink to comment#

    NIce. Thanks for help :)

  7. User Avatar
    Permalink to comment#

    If you’re still reading comments, I would love to know why this is not working on my site. I have a drop down menu under “photos” and as can be seen when first hovering the corners are rounded but then they revert back to square corners. I don’t see any errors in the way I’ve formatted the corners and oddly it was working until I changed the border color, then it stopped.

    css is

    mainMenu.ddsmoothmenu ul li ul{

    position: absolute;
    left: 0;
    display: none; /*collapse all sub menus to begin with*/
    visibility: hidden;
    margin-left: -20px;
    border: 1px solid #686868;
    border-radius: 10px;
    -webkit-border-radius: 4px;
    -webkit-box-shadow: 0px 0px 6px 4px rgba(8, 8, 8, .5);
    box-shadow: 0px 0px 6px 4px rgba(8, 8, 8, .5); 
    /*border-bottom:1px solid #222;*/


  8. User Avatar
    Permalink to comment#

    Nice tutorial. Aptly explained. You went beyond most other tutorials and explained things others only dream about. Thanks.

  9. User Avatar
    Permalink to comment#

    that’s some badass you got over there.
    nice tut, btw

  10. User Avatar
    Permalink to comment#

    Hi ,
    I am trying to apply border-radius to div,which have border with gradient color.
    But it is not allowing me to apply border-radius.

    Below is my code snippet.

    .border:nth-child(1) {border-image: -webkit-linear-gradient(#000, #fff) 14% 14% 14% 14% stretch; }
    .border{ border-radius:15px; -webkit-border-radius:15px; }
    .border {display: inline;float: left;margin: 15px;position: relative;border-width: 20px;width: 160px;height: 160px;}

    Lorem Ipsum

  11. User Avatar
    Permalink to comment#

    how supported IE 6,7,8 Browser.
    please post your comments

  12. User Avatar
    Permalink to comment#

    OMG that green color used in the example is “BADASS” in hex value!!! – #BADA55

  13. User Avatar
    Permalink to comment#

    Thanks for the tutorial!
    Is there any possibility to access the “whitespace” clipped by border-radius ?
    f.ex. to change its color to different than the background.

  14. User Avatar
    Permalink to comment#

    Thanks for another great tutorial!

    I just took what I learned and took it a step further to keep rounded corners proportional on responsive images.

    A 15 px border radius at 100% on a square image would be

    border-radius: 5%

    To achieve the same on a 300px x 650px it would be

    border-radius: 2.31%/5%

    This is calculated by dividing the pixel radius by the width and the height. The corner will be perfectly rounded and stay proportional to the image size when it is scaled.

  15. User Avatar
    Permalink to comment#

    Hi Chris, I really appreciate your work and the assistance help you offer. Hope you can help on this one…I am working on round corners for a while and I face a problem with images in the background of a div and round corners with opacity values for the border. It works in firefox but Safari always shows the image up to the outer edge. Do you have an idea how to fix it?
    Here is the code:
    div { height:250px; width:250px; background-image:url(image.jpg);}
    .round {
    border-radius: 60px; /* Prevent background color leak outs /
    border: 20px solid rgb(18, 50, 51);
    border: 20px solid rgba(18, 50, 51, 0.9);
    -webkit-background-clip: padding-box;/
    for Safari /
    Firefox – alte Syntax */

  16. User Avatar
    Arvind Soni
    Permalink to comment#

    please just i ask that same css work on background image if that work then how!

  17. User Avatar
    Giovanni Mattucci
    Permalink to comment#

    Using percentages is perfect for a responsive CSS Circle, but having it break below iOS 5.0 is a problem I’m having.

    Is there a good workaround regarding the lack of support for Border Radius Percentages that you noted specifically in relation to responsive website development?

  18. User Avatar

    it not woring in IE9

  19. User Avatar
    Suresh Dhakal
    Permalink to comment#

    Thank you So much

  20. User Avatar
    Permalink to comment#

    There is a bug in the Samsung Galaxy S4 default android browser. That the you have to use

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    instead of


  21. User Avatar
    Permalink to comment#

    how bout on ie8

  22. User Avatar
    Permalink to comment#


  23. User Avatar
    Ibrahim Aziz
    Permalink to comment#

    Fantastic !, thanks.

  24. User Avatar
    Right Clik
    Permalink to comment#

    padding: 5px 0 5px 5px;
    width: 100%;
    background-color: rgb(73, 180, 31);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    When I introduce padding in my div, it loses the rounded corner, just shows two rounded corners in the left and the right side corners are left square, how can l display all of my corners rounded?

  25. User Avatar
    Permalink to comment#

    i see this post in my mobile samsung galaxy y android v.2.3 and all examples look good but when i use the border-radius in my site the image look square i’m confuse i don’t understand what happend, i apply border radius direct to the image element… some idea?
    this is my css
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5);
    -moz-box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5);
    box-shadow: 0px 0px 7px 0px rgba(119, 119, 119, 0.5);

  26. User Avatar

    Simple and sample.Yeah

  27. User Avatar


    this is working nice, but cannot use border-radius on a canvas element on any Samsung S2 / S4 native browser


  28. User Avatar
    Permalink to comment#

    Thank alotzz…

  29. User Avatar
    karan sheth
    Permalink to comment#


  30. User Avatar
    Permalink to comment#

    Is there a way to change the border radius based on a keyframe animation? for instance at 20% make the radius 5%, 50% = 20%, 75% = 30%, 100% = 50%…

  31. User Avatar
    Permalink to comment#

    Hello guy!
    I just wanted to thank you guys for your enormous efforts that made Css-tricks into one of the best css and front end development references on the web.

  32. User Avatar
    Permalink to comment#

    thank you, this is so helpful. xx

  33. User Avatar
    Permalink to comment#

    Great, and it’s badass color man.

  34. User Avatar
    Permalink to comment#

    Now the modern browsers almost support border-radius with single line instead of prefix (-webkit, -moz, -o) and I think we should partially remove prefix for future projects, one more thing that if you are still interested in shape and prefix CSS, let make it easier to set by dropping by my webtool:
    Then give me your opinion.

  35. User Avatar
    Permalink to comment#

    Thanks a lot. very helpful

  36. User Avatar
    Jatin Sharma
    Permalink to comment#

    Really It’s Super And So Helpful. Thanks

  37. User Avatar
    Permalink to comment#

    Currently browsing in an Android 2.0.2 native’s browser (this is a really un-updated browser, would not evem handdle any transition at all, bugging most of the pages with an add banner on top). Surprisingly, box shadows seems to work in all cases except when.there’s a percentage value. I will try with the -webkit- prefix and will post if that’s working. Ps: nice read, thanks for the quality content.

  38. User Avatar
    Permalink to comment#

    Thanks so much!!!!!! :) I used border-radius: 0px 50px 50px 0px; and Work it!

  39. User Avatar
    Ayhan Selek
    Permalink to comment#

    Thank you, it’s great tutorial. You can see the css results by using the border-radius builder on this page:

  40. User Avatar
    Permalink to comment#

    I really don’t understand the reasoning for the rules for 2 values. Why not match padding and margins? 2 values = top and bottom.

  41. User Avatar
    Sahdev Kansal
    Permalink to comment#

    When we give two values in border-color then first one get applied to top and bottom and second value get
    applied to right and left. You have mentioned that wrong. Please check that.

Leave a Comment

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.