# Свойство border-radius

Свойство `border-radius` создает скругленные уголки для границы и фона. Значением свойства служат любые единицы для размеров. Значение по умолчанию: `0`. Является сокращением для свойств `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius`.

## Синтаксис

`селектор { border-radius: значение; }`

## Количество значений

Свойство может принимать `1`, `2`, `3` или `4` значений, указываемых через пробел:

Количество | Описание
--- | ---
`1` | Для всех углов одновременно.
`2` | Первое значение задает скругление для верхнего правого и нижнего левого углов, второе - для верхнего левого и нижнего правого.
`3` | Первое значение задает скругление для верхнего левого угла, второе - одновременно для верхнего правого и нижнего левого, а третье - для нижнего правого угла.
`4` | Первое значение задает скругление для верхнего левого угла, второе - для верхнего правого, третье - для нижнего правого угла, а четвертое - для нижнего левого угла.

## Эллиптическое скругление

Два значения через слеш устанавливают эллиптическое скругление. Значение перед слешем указывает горизонтальное скругление, а значения после слеша - вертикальное:

`селектор { border-style: горизонтальное / вертикальное; }`

Если задаются скругления для нескольких углов, то до слеша перечисляются все горизонтальные скругления, а после него - все вертикальные.

## Пример

Установим скругление `10px` для всех углов:

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

:

## Пример

Посмотрим, как выглядит скругления для границы в виде точек:

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

:

## Пример

Установим скругление в `10px` для углов одной диагонали, и скругления в `40px` - для углов второй диагонали:

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

:

## Пример

Установим скругление в `10px` для верхнего левого угла, скругление в `30px` для нижнего правого угла, и скругления в `50px` - для углов второй диагонали:

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

:

## Пример

Установим различные скругления для каждого из углов:

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

:

## Пример

Давайте сделаем эллиптическое скругление, установив `20px` для горизонтальной части скругления, а `40px` - для вертикальной:

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

:

## Пример

А сейчас установим разное эллиптическое скругление для всех углов по отдельности:

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

:

## Пример

Если поставить для квадратного блока скругления, равное половине стороны квадрата, то получится круг:

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

:

## Пример

Если поставить скругление, большее чем сторона квадрата, то все равно получится круг:

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

:

## Пример

Круг можно также получить, если установить `border-radius` в `50%` (преимущество в том, что при изменении размеров квадрата не придется менять скругление):

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

:

## Пример

Если установить `border-radius` в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в `400px`, высота в `200px`, а `border-radius` в `10%`, то это все равно, как если бы было написано `40px/20px`:

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

:

## Пример

Установим значение `border-radius` в `50%` для прямоугольника - получится эллипс:

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

:

## Пример

Свойство `border-radius` скругляет не только уголки не границы, но и фона:

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

:

## Смотрите также

- свойство `border`,
  которое является свойством-сокращением для границы

←→
↑