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

CSS свойство border-bottom-right-radius устанавливает скругленную форму правого нижнего угла элемента.

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

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

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

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

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

Синтаксис

border-bottom-right-radius: length | % | initial | inherit;

Пример с одним значением:

Пример

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

Рассмотрим другой пример, где использованы две значения.

Пример

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

Другой пример с процентами:

Пример

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

Значения

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

Поддержка браузера

4.0+ 9.0+ 12.0+ 4.0+ 5.0+ 10.5+



Похожие статьи