border-radius
=============

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

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:

* `border-top-left-radius`
* `border-top-right-radius`
* `border-bottom-right-radius`
* `border-bottom-left-radius`
Syntax
------


```css
/\* 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

|  |  |  |
| --- | --- | --- |
| *radius* | A light blue rectangle with a light gray border. All 4 corners are rounded. | 
 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* | A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded. | 
 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* | A light blue rectangle with a light gray border. The 2 corners on the top right and the bottom left are rounded. | 
 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* | A light blue rectangle with a light gray border. The corner on the top left is rounded. | 
 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* | A light blue rectangle with a light gray border. The corner on the top right is rounded. | 
 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* | A light blue rectangle with a light gray border. The bottom right corner is rounded. | 
 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* | A light blue rectangle with a light gray border. The bottom left corner is rounded. | 
 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.
  |

`<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:


```css
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;
```



```css
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
--------
```

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>
```


```
pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}
```

### Live Samples

* Sample 1 : https://jsfiddle.net/Tripad/qnGKj/2/
* Sample 2 : https://jsfiddle.net/Tripad/qnGKj/3/
* Sample 3 : https://jsfiddle.net/Tripad/qnGKj/4/
* Sample 4 : https://jsfiddle.net/Tripad/qnGKj/5/
* Sample 5 : https://jsfiddle.net/Tripad/qnGKj/6/
Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Border-radius-related CSS properties: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`, `border-start-start-radius`, `border-start-end-radius`, `border-end-start-radius`, `border-end-end-radius`