Grow your CSS skills. Land your dream job.

border-radius

Last updated on:

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


For the best possible browser support, you should 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. The Mozilla Docs explains it best:

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

Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3+ Any 10.5+ 9+ Any Any

Comments

  1. Will Drotar
    Permalink to comment#

    Nice tutorial!

  2. Rick Snackers
    Permalink to comment#

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

    Anyway. Nice tutorial!

  3. That was really classy.. Tnx

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

  5. Hello,
    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. NIce. Thanks for help :)

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

    http://danielpaymar.com

    css is

    mainMenu.ddsmoothmenu ul li ul{

    position: absolute;
    left: 0;
    display: none; /*collapse all sub menus to begin with*/
    visibility: hidden;
    width:auto;
    margin-left: -20px;
    padding-bottom:0px;
    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. crw
    Permalink to comment#

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

  9. luis
    Permalink to comment#

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

  10. Sanil
    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. dihanalex
    Permalink to comment#

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

  12. ThatWeirdo
    Permalink to comment#

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

  13. domme
    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. Jim
    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. Justus
    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 /
    -moz-border-radius:360px;/
    Firefox – alte Syntax */
    }

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

  17. 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. Mangesh

    it not woring in IE9

  19. hhjk
    Permalink to comment#

    ssfff kjgphsj lljb

  20. Thank you So much

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

        border-radius:5px;
    

    http://stackoverflow.com/questions/17944749/border-radius-style-doesnt-work-in-android-browser

  22. steven
    Permalink to comment#

    how bout on ie8

  23. Toamil
    Permalink to comment#

    Awosome…..Thanks

  24. Fantastic !, thanks.

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

  26. Ensk
    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
    img{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    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);
    }

  27. Simple and sample.Yeah

  28. Iskren

    Hello

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

    Regards,
    Iskren

  29. CSS-Trick is always my favorite site.I always found something useful here.
    http://www.falconwebsoft.com

  30. Mridul
    Permalink to comment#

    Thank alotzz…

  31. karan sheth
    Permalink to comment#

    woow

  32. This is my css university.

  33. Timmy
    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%…

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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