Свойство CSS border-bottom-right-radius
Свойство CSS border-bottom-right-radius используется для установки скругления нижнего правого угла элемента.
Свойство border-bottom-right-radius является одним из свойств CSS3.
Свойство border-bottom-right-radius задаёт горизонтальный и вертикальный радиусы, определяющие скруглённый нижний правый угол для рамки элемента. Данное свойство задаётся двумя значениями: длиной и процентами. Обратите внимание, что процентные значения вычисляются относительно ширины элемента.
Если указано только одно значение, оно задаёт как горизонтальный, так и вертикальный радиусы эллипса. Если заданы два значения, первое устанавливает горизонтальный радиус, а второе — вертикальный. Если значение не определено, радиус по умолчанию равен 0px, что приводит к образованию прямого угла. При использовании фонового изображения или цвета оно будет обрезано по границе. Процесс обрезки определяется значением свойства background-clip.
INFO
Если после border-bottom-right-radius применяется сокращённое свойство border-radius, оно переопределит значение длинного свойства.
| Начальное значение | 0 |
|---|---|
| Применяется ко | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимация | Да. Радиус нижнего правого угла может анимироваться. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.borderBottomRightRadius = "15px"; |
Синтаксис
Свойство CSS border-bottom-right-radius
border-bottom-right-radius: length | % | initial | inherit;Пример свойства border-bottom-right-radius:
Пример свойства CSS border-bottom-right-radius с одним значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Результат
Пример свойства border-bottom-right-radius с двумя значениями:
Пример свойства CSS border-bottom-right-radius с двумя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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 example.</h2>
<div></div>
</body>
</html>Пример свойства border-bottom-right-radius со значением «процент»:
Пример свойства CSS border-bottom-right-radius со значением в процентах
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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 example.</h2>
<div></div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Задаёт форму нижнего правого угла в «px». | Запустить » |
| % | Задаёт форму нижнего правого угла в процентах. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие утверждения о свойстве CSS border-bottom-right-radius являются верными?