CSS свойство border-radius

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Свойство border-radius является универсальным свойством, которое позволяет за одну декларацию определить свойства border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.

Если задается только одно значение, то оно будет определять радиус для всех 4 углов рамки элемента.

Тем не менее, при необходимости можно устанавливать радиус для каждого угла отдельно. При этом соблюдаются следующие правила:

4 значения: первое значение - верхний левый угол, второе - верхний правый угол, третье - нижний правый угол и четвертое значение - нижний левый угол
3 значения: первое значение - верхний левый угол, второе значение - верхний правый и нижний левый углы и третье значение - нижный правый угол
2 значения: первое значение - верхний левый и нижний правый углы, второе значение - верхний правый и нижний левый углы
1 значение: у всех четырех углов одинаковый радиус скругления

CSS синтаксис

border-radius: радиус|% [ / радиус|%] | initial | inherit;

Возможные значения

Значение	Описание
радиус	Устанавливает радиус скругления в допустимых в CSS значениях (px, cm, in, em и др.). Значение по умолчанию 0.
%	Устанавливает радиус скругления в процентах от ширины блока.
inherit	Значение наследуется от родительского элемента.
initial	Устанавливает значение по умолчанию.

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки).

Например,


div {
   border-radius: 2em 1em 4em / 0.5em 3em;
}

то же самое, что


div {
   border-top-left-radius: 2em 0.5em;
   border-top-right-radius: 1em 3em;
   border-bottom-right-radius: 4em 0.5em;
   border-bottom-left-radius: 1em 3em;
}

Пример использования

У элементов <div> делаем углы рамки скругленными


div {
     border: 2px solid;
     border-radius: 25px;
}