CSS Reference Property

border-radius

The border-radius property is used to round the corners of an element.

It is a shorthand property for the longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

The border-radius can take either one to four values, or eight values separated by a slash ‘/’, with one to four values on each side of the slash.

  1. If there is no slash, then: it can take one, two, three, or four values.
    border-radius: [radius value] [radius value]? [radius value]? [radius value]?; // '?' indicates value is optional
                                
    • If four values are given, then they specify the radii of each of the four corners equally; that is, the first value will specify both the x and y radii of the top-left corner, so it will be a circular curve. The second value will specify the radii for the top-right corner, the third value will specify the radii for the bottom-right corner, and the fourth value will specify the radii of the bottom-left corner.
    • If three values are given, the first specifies the radii of the top-left corner, the second specifies the radii of the top-right and bottom-left corners, and the third one specifies the radii of the bottom-right corner.
    • If two values are given, then the first specifies the radii of the top-left and bottom-right corners, and the second value specifies the radii of the top-right and bottom-left corners.
    • If one value is given, then it specifies the radii of the four corners equally.
    • For example, the following:

      border-radius: 1em 3em 2em;
                                      

      is equivalent to:

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

      In each of the above cases, when no slash is used, the four corners of the element will be rounded and their curvature will be a perfect circle.

      circular-corner-curve
      Two equal radii on each corner will result in a circular curvature. Every corner in this example has 50px horizontal and vertical radii.
  2. If there is a slash, then: it can take up to eight values—one to four values on each side of the slash.

    border-radius: [top-left horizontal radius] [top-right horizontal radius]? [bottom-right horizontal radius]? [bottom-left horizontal radius]? / [top-left vertical radius] [top-right vertical radius]? [bottom-right vertical radius]? [bottom-left vertical radius]?
    

    The values specified before the slash set the horizontal radius of the corners in the same order specified previously. The values specified after the slash set the vertical radius of the respective corners.

    For example, the following:

    border-radius: 2em 1em 4em / 0.5em 3em;
                                

    is equivalent to:

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

    In this case, the corners of the element will be rounded and their curvature will be elliptical.

    elliptical-corner-curve
    Two non-equal radii on each corner will result in an elliptical curvature. Every corner in this example has a 100px horizontal radius and a 50px vertical radius.

Trivia & Notes

If the element has a background color or a background image, the background will also be clipped to the border radius specified.

background-clipped
The element’s background image is clipped to the specified border radius.

However, sometimes the background color of an element may “leak” outside the curvature of the border when it is rounded. To fix that, you can use the background-clip property and set its value to padding-box.

.element {
    border-radius: 30px;
    background-clip: padding-box;
}
                

If an element has a border image, the border image is not clipped to the curve of the rounded corners.

The content of the element may overflow the element on the corners that are rounded if the element does not have enough padding to “push” the content inwards. (See image below)

content-overflow
The element’s content may overflow it where the corners are rounded if it has no padding.

This example adds appropriate padding, so that the contents do not overflow the corners. Note that there is no border, but the background will still have rounded corners.

.element {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
}
                

Also, The area outside the curve of the border edge does not accept pointer events on behalf of the element.

Moreover, corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, browsers must proportionally reduce the used values of all border radii until none of them overlap. You can learn more about how this works in this excellent talk by Lea Verou about the border-radius property.

Percentage values are perfect for creating full circular or elliptical shapes. Using border-radius: 50%; will result in a full circular shape on an element whose height and width are equal.

circle
Element with equal height and width and a border radius value of 50%;

If the element’s height and width are not equal, the resulting shape would be an ellipse.

ellipse
Element with border radius 50%, whose height and width are not equal.

Official Syntax

  • Syntax:

    border-radius: [ <length> | <percentage> ]{1,4} [/ [ <length> | <percentage> ]{1,4} ]?
                           
  • Initial: 0 0 0 0, which is the concatenation of the initial value of each of its longhand properties
  • Applies To: all elements (but browsers are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.)
  • Animatable: yes, each of the longhand properties is animatable as two values of length, percentage, or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.

Values

The unofficial syntax looks like this:

border-radius: [radius value] [radius value]? [radius value]? [radius value]?;
                            

or this:

border-radius: [top-left horizontal radius] [top-right horizontal radius]? [bottom-right horizontal radius]? [bottom-left horizontal radius]? / [top-left vertical radius] [top-right vertical radius]? [bottom-right vertical radius]? [bottom-left vertical radius]?

In both cases, the question mark (?) means that the value is optional. If a value is omitted, the browser determines its value as mentioned in the description section above.

Every radius can be a <length> or <percentage> value.

Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

<percentage>
See the <percentage> entry for a list of possible values.
<length>
See the <length> entry for a list of possible values.

Examples

border-radius: 50%;
border-radius: 30px 20px 40px;
border-radius: 1em 2em;
border-radius: 3em / 2em 4em;
border-radius: 1em 2em 1em 3em / 2em 3em;  
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

CSS3 Border-radius (rounded corners)

Method of making the border corners round. Covers support for the shorthand `border-radius` as well as the long-hand properties (e.g. `border-top-left-radius`)

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 5
  • 50
  • 9
  • 10
  • 5

Mobile / Tablet

  • 4.0
  • 2.2
  • No
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:19 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.