Перейти к содержанию

border-bottom-right-radius

Свойство border-bottom-right-radius устанавливает радиус скругления правого нижнего уголка рамки.

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

Демо

Скругление может быть кругом или эллипсом, или, если одно из значений равно 0, скругление не выполняется, а угол является квадратным.

border-bottom-right-radius

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

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* The corner is a circle */
/* border-bottom-right-radius: radius */
border-bottom-right-radius: 3px;

/* Percentage values */
border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */

/*The corner is an ellipse */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;

/* Global values */
border-bottom-right-radius: inherit;
border-bottom-right-radius: initial;
border-bottom-right-radius: revert;
border-bottom-right-radius: revert-layer;
border-bottom-right-radius: unset;

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Значение по-умолчанию:

1
border-bottom-right-radius: 0;

Применяется ко всем элементам

Спецификации

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

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>border-bottom-right-radius</title>
    <style>
      .radius {
        background: #fc0;
        padding: 15px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div
      style="border-bottom-right-radius: 20px"
      class="radius"
    >
      border-bottom-right-radius: 20px
    </div>
    <div
      style="border-bottom-right-radius: 70px 40px"
      class="radius"
    >
      border-bottom-right-radius: 70px 40px
    </div>
  </body>
</html>

Комментарии