border-radius property CSS Reference

---

Definition and Usage

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

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.

This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.

• Initial the concatenation of the initial values of its longhand properties:
  • 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 UA 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.
• Inherited no
• Percentages refer to the corresponding dimension of the border box
• Media visual
• Computed Value as each of the properties of the shorthand:
  • border-bottom-left-radius: two absolute length or percentages
  • border-bottom-right-radius: two absolute length or percentages
  • border-top-left-radius: two absolute length or percentages
  • border-top-right-radius: two absolute length or percentages
• Animatable as each of the properties of the shorthand:
  • border-top-left-radius: yes, as a 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.
  • border-top-right-radius: yes, as a 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.
  • border-bottom-right-radius: yes, as a 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.
  • border-bottom-left-radius: yes, as a 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.
• Canonical order the unique non-ambiguous order defined by the formal grammar

---

Syntax

Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

The syntax of the first radius allows one to four values:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left
The syntax of the second radius also allows one to four values
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
border-radius: inherit

---

Values

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.
inherit		Is a keyword indicating that all four values are inherited from their parent's element calculated value.

<length>

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.

<percentage>

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, 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; /* 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; /* 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;

---

Examples

  border: solid 10px;
  /* the border will curve into a 'D' */
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

---

Compatibility

Desktop browsers

Mobile browsers