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

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

CSS синтаксис

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

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

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

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

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

Пример №1

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


div {
     border: 2px solid;
     border-top-left-radius: 2em;
}

Пример №2

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


div {
     border: 2px solid;
     border-top-left-radius: 30px 20px;
}