1. Главная
2. CSS
3. Радиусы углов

РАДИУСЫ УГЛОВ

Свойство border-radius определяет радиус всех углов элемента. Свойства border-top-left-radius, border-top-right-radius, border-bottom-left-radius и border-bottom-right-radius определяют радиусы верхнего левого, верхнего правого, нижнего правого и нижнего левого углов соответственно.

У свойства border-radius может быть как одно, так и два, три и четыре значения разделённых пробелами. Одно значение устанавливает одинаковый радиус для всех углов. В случае двух значений, первое значение будет соответствовать радиусам верхнего левого и нижнего правого углов, второе значение — радиусам верхнего правого и нижнего левого углов. В случае трёх значений, первое значение будет соответсвовать левому верхнему углу, второе — верхнему правому и нижнему левому, третье — нижнему правому. В случае четырёх значений будет установлен радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов соответственно (по часовой стрелке).

В случае, когда радиус задаётся двумя значениями разделёнными косой чертой, то первое значение задает горизонтальный радиус, а второе вертикальный.

Поддержка браузеров

Синтаксис

border-radius: единицы измерения | единицы измерения/единицы измерения | проценты | проценты/проценты

Значения свойства

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>
<div class="block block-4"></div>
<div class="block block-5"></div>

.block {
  height: 50px;
  width: 50px;
  display: inline-block;
  background: #f1f1f1;
  border: 3px solid gray
}

.block-1 {
  border-radius: 30px
}

.block-2 {
  border-radius: 15px 10px 20px 25px
}

.block-3 {
  border-radius: 12px / 25px
}

.block-4 {
  border-top-left-radius: 45px
}

.block-5 {
  border-bottom-right-radius: 45px
}