border-radius

Задает радиус скругления углов у элемента. Каждый угол определяется с помощью одного или двух значений, от этого зависит форма элемента — круг или эллипс.

Скругление применяется, даже если у элемента не задана рамка.

Можно указать дополнительно до 4 значений через слеш “/”, они будут обозначать скругление по вертикали (для эллиптического скругления).

Это короткая запись четырех свойств:
border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

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

1 значение border-radius: 10px;
— для всех углов 10px

2 значения border-radius: 10px 20px;
— верхний левый и нижний правый 10px
— верхний правый и нижниый левый 20px

3 значения border-radius: 10px 20px 30px;
— верхний левый 10px
— верхний правый и нижний левый 20px
— нижний правый по 30px

4 значения border-radius: 10px 20px 30px 40px;
— верхний левый 10px
— верхний правый 20px
— нижний правый по 30px
— нижний левый 40px

Через слеш “/” могут быть заданы от 1 до 4 значений для эллиптического скругления. Порядок аналогичный: верхний левый, верхний правый, нижний правый, нижний левый.

Примеры

border-radius: 10px;
border-radius: 30%;
border-radius: 10px 30px 50px;
border-radius: 20px / 50px;
border-radius: 10px 20px / 30px 40px;
border-radius: 10px 20px 30px 40px / 30px 40px 50px 60px;

Значения

Значение	Описание
радиус	По умолчанию: 0. Радиус скругления в единицах измерения (px, em и других).
процент	Процент скругления элемента
inherit	Наследует значение родительского блока.
initial	Устанавливает значение по умолчанию.