# border-radius property

The `border-radius` property creates rounded corners for border and background. The property value is any size units. Default value: `0`. It is a shorthand for `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius` properties.

## Syntax

`selector { border-radius: value; }`

## Number of values

The property can take `1`, `2`, `3` or `4` values, separated by a space:

Number | Description
--- | ---
`1` | For all corners at the same time.
`2` | The first value sets the rounding for top-right and bottom-left corners, the second - for top-left and bottom-right.
`3` | The first value sets the rounding for top-left corner, the second - for both top-right and bottom-left, and the third - for bottom-right corner.
`4` | The first value specifies the rounding for top-left corner, the second value for top-right corner, the third value for bottom-right corner, and the fourth value for bottom-left corner.

## Elliptical rounding

Two values ​​separated by a slash set an elliptical rounding. The value before the slash indicates a horizontal rounding, and the values ​​after the slash indicate a vertical rounding:

`selector { border-style: horizontal / vertical; }`

If rounding is specified for several corners, then all horizontal roundings are listed before the slash, and all vertical ones after it.

## Example

We set the rounding to `10px` for all corners:

`<div id="elem"></div>` `#elem { border-radius: 10px; border: 1px solid black; width: 300px; height: 100px; }`

:

## Example

Let's see what the rounding looks like for a border in the form of dots:

`<div id="elem"></div>` `#elem { border-radius: 10px; border: 1px dotted black; width: 300px; height: 100px; }`

:

## Example

Set the rounding to `10px` for the corners of one diagonal, and the rounding to `40px` - for the corners of the second diagonal:

`<div id="elem"></div>` `#elem { border-radius: 10px 40px; border: 1px solid black; width: 300px; height: 100px; }`

:

## Example

Set the rounding to `10px` for top-left corner, the rounding to `30px` for bottom-right corner, and the rounding to `50px` for the corners of the second diagonal:

`<div id="elem"></div>` `#elem { border-radius: 10px 50px 30px; border: 1px solid black; width: 300px; height: 100px; }`

:

## Example

Set different roundings for each corner:

`<div id="elem"></div>` `#elem { border-radius: 10px 30px 50px 70px; border: 1px solid black; width: 300px; height: 100px; }`

:

## Example

Let's make an elliptical rounding by setting `20px` for the horizontal value of the rounding and `40px` for the vertical one:

`<div id="elem"></div>` `#elem { border: 1px solid black; border-radius: 20px / 40px; width: 300px; height: 100px; }`

:

## Example

Now let’s set a different elliptical rounding for all corners separately:

`<div id="elem"></div>` `#elem { border: 1px solid black; border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px; width: 300px; height: 100px; }`

:

## Example

If you put a rounding for a square block equal to half a square side, you get a circle:

`<div id="elem"></div>` `#elem { border-radius: 100px; border: 1px solid black; width: 200px; height: 200px; }`

:

## Example

If you put a rounding larger than a square side, you will still get a circle:

`<div id="elem"></div>` `#elem { border-radius: 200px; border: 1px solid black; width: 200px; height: 200px; }`

:

## Example

You can also get a circle by setting `border-radius` to `50%` (the advantage is that you don't have to change the rounding when resizing a square):

`<div id="elem"></div>` `#elem { border: 1px solid black; border-radius: 50%; width: 200px; height: 200px; }`

:

## Example

Setting `border-radius` as a percentage for a rectangle will result in an elliptical rounding. If the width is set to `400px`, the height to `200px`, and `border-radius` to `10%`, then it’s the same, as if `40px/20px` were written:

`<div id="elem"></div>` `#elem { border-radius: 10%; border: 1px solid black; width: 400px; height: 200px; }`

:

## Example

Let's set the `border-radius` value to `50%` for a rectangle - we get an ellipse:

`<div id="elem"></div>` `#elem { border-radius: 50%; border: 1px solid black; width: 400px; height: 200px; }`

:

## Example

The `border-radius` property rounds not only the corners of a border, but also a background:

`<div id="elem"></div>` `#elem { border-radius: 20px; width: 300px; height: 100px; background-color: #e4f1ed; }`

:

## See also

- the `border` property
  that is a shorthand property for a border

← →
↑
en ru