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

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

CSS синтаксис

border-bottom-right-radius: значение|% [значение|%] | initial | inherit;

Внимание: Использование двух значений (числовых или процентных) позволяет определить эллиптическую форму уголка рамки. При этом первое значение определяет горизонтальный радиус, а второе - вертикальный. Если используются процентные значения, то первое значение - это процент от ширины блока, а второе - процент от его высоты.

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

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

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

Пример №1

Добавляем круглую рамку в правом нижнем углу элемента <div>


div {
     border: 2px solid;
     border-bottom-right-radius: 2em;
}

Пример №2

Добавляем эллиптическую рамку в правом нижнем углу элемента <div>


div {
     border: 2px solid;
     border-bottom-right-radius: 30px 20px;
}