Свойство CSS border-bottom-right-radius
Пример
Добавьте закругленные границы в правый нижний угол двух элементов <div>:
#example1 {
border: 2px solid red;
border-bottom-right-radius: 25px;
}
#example2 {
border: 2px solid red;
border-bottom-right-radius: 50px
20px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство border-bottom-right-radius
определяет радиус правого нижнего угла.
Совет: это свойство позволяет добавлять к элементам закругленные границы!
Значение по умолчанию: | 0 |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.borderBottomRightRadius="25px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
border-bottom-right-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Синтаксис CSS
border-bottom-right-radius: length|% [length|%]|initial|inherit;
Примечание. Если вы задаете два значения, первое используется для нижней границы, а второе — для правой границы. Если второе значение опущено, оно копируется из первого. Если любая длина равна нулю, угол квадратный, а не закругленный.
Значения свойств
Value | Description | Play it |
---|---|---|
length | Defines the shape of the bottom-right corner. Default value is 0. Read about length units | |
% | Defines the shape of the bottom-right corner in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Добавьте закругленные границы в нижний правый угол в процентах:
#example1 {
border: 2px solid red;
background: url(paper.gif);
padding: 10px;
border-bottom-right-radius: 40%;
}
Связанные страницы
Учебное пособие по CSS: закругленные углы CSS
Справочник по HTML DOM: свойство borderBottomRightRadius