border-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with rounded corners.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse.

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit, which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* The syntax of the first radius allows one to four values */
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* Global values */
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

The border-radius property is specified as:

one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners.
followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

Values

A light blue rectangle with a light gray border. All 4 corners are rounded.

A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded.

<length>: Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.
<percentage>: Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

border-radius: 1em/5em;

/* It is equivalent to: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Formal definition

Initial value	as each of the properties of the shorthand: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Applies to	all elements; but User Agents 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.. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Computed value	as each of the properties of the shorthand: `border-bottom-left-radius`: two absolute `<length>`s or `<percentage>`s `border-bottom-right-radius`: two absolute `<length>`s or `<percentage>`s `border-top-left-radius`: two absolute `<length>`s or `<percentage>`s `border-top-right-radius`: two absolute `<length>`s or `<percentage>`s
Animation type	as each of the properties of the shorthand: `border-top-left-radius`: a length, percentage or calc(); `border-top-right-radius`: a length, percentage or calc(); `border-bottom-right-radius`: a length, percentage or calc(); `border-bottom-left-radius`: a length, percentage or calc();

Formal syntax

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Comparing border styles

The following example has seven <pre> elements, each of which demonstrates combinations of border and border-radius styles. The styles applied to each <pre> element are included as the element's contents, so you can see the CSS declarations necessary to create the associated border style:

Specifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`4_values_for_4_corners`	4	12	4	10.5	5	18	4	11	4.2	1.0	4.4
`border-radius`	4 Chrome ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value. 1	1212	4 ["Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-style` was `solid`. This has been fixed in Firefox 50.", "To conform to the CSS3 standard, Firefox 4 changes the handling of `<percentage>` values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with `border-radius: 50%;`. Firefox 4 also makes rounded corners clip content and images if `overflow: visible` is not set."] 1–12	10.5 Before Opera 11.60, replaced elements with `border-radius` do not have rounded corners.	5 Safari ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value. 3	18	4 Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-style` was `solid`. This has been fixed in Firefox 50. 4–14	11	4.2 Safari ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value. 1	1.0	≤4.42
`elliptical_borders`	1 Before Chrome 4, the slash `/` notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. `-webkit-border-radius: 40px 10px;` is equivalent to `border-radius: 40px / 10px;`.	12	4	10.5	3 Before Safari 5, the slash `/` notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. `-webkit-border-radius: 40px 10px;` is equivalent to `border-radius: 40px / 10px;`.	18	4	11	4.2	1.0	4.4
`percentages`	8	12	4 Before Firefox 4, `<percentage>` values are implemented in a non-standard way. Both horizontal and vertical radii were relative to the width of the border box.	11.5 Before Opera 11.5, the implementation of `<percentage>` values was buggy.	5.1	18	4	11.5	5	1.0	4.4

radius		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-left		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-left		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-right		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-right		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-left		Is a `<length>` or a `<percentage>` denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.