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

❮ Назад Вперед ❯

CSS свойство border-top-left-radius устанавливает скругленную форму левого верхнего угла элемента. Возможны три типа скругления: круг или эллипс, или без значения, при котором угол будет квадратным.

При использовании фонового изображения или цвета, фон также будет срезан указанным радиусом границы. Этот процесс устанавливается значением свойства background-clip.

CSS свойство border-top-left-radius имеет две значения: длина и процент.

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

Процент для горизонтального радиуса указывает на толщину блока, а процент для вертикального радиуса - на высоту блока. Отрицательные значения недопустимы.

Значение по умолчанию	0
Применяется	Ко всем элементам, а также к ::first-letter .
Наследуется	Нет
Анимируемое	Да. Радиус границы анимируем.
Версия	CSS1
DOM синтаксис	object.style.borderTopLeftRadius = "25px";

Синтаксис

Border-top-left-radius: length | % | initial | inherit;

Рассмотрим пример border-top-left-radius, где использовано только одно значение. При использовании только одного значения, оно устанавливает верхнюю и левую границу эллипса.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      height: 40px;
      background: #8ebf42;
      border: 4px solid #000000;
      border-top-left-radius: 25px;
      }          
    </style>
  </head>
  <body>
    <h2>Пример border-top-left-radius.</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример с двумя значениями. Первое из них устанавливает верхнюю границу эллипса, а второе - левую границу эллипса.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      height: 40px;
      background: #ccc;
      border: 4px solid #000000;
      border-top-left-radius: 50px 25px;
      }          
    </style>
  </head>
  <body>
    <h2>Пример border-top-left-radius.</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример установления формы блока в процентах, где первое значение устанавливает горизонтальный радиус эллипса, а второе - вертикальный радиус эллипса.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      height: 40px;
      background: #eee;
      border: 4px solid #000000;
      border-top-left-radius: 50% 60%;
      }          
    </style>
  </head>
  <body>
    <h2>Пример border-top-left-radius.</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
length	Устанавливает скругленную форму для левого верхнего угла.
%	Устанавливает скругленную форму для левого верхнего угла в процентах.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.