CSS-свойство border-bottom-right-radius
CSS border-bottom-right-radius скругляет правый нижний угол элемента. Синтаксис, значения и примеры.
CSS-свойство border-bottom-right-radius скругляет только правый нижний угол блока границы элемента. Это одно из четырёх полных (longhand) свойств — наряду с border-top-left-radius, border-top-right-radius и border-bottom-left-radius — которые объединяет сокращённое свойство border-radius. Используйте полное свойство, когда нужно скруглить только один угол, оставив остальные прямыми. Оно входит в состав свойств CSS3.
Принцип работы
Угол отрисовывается как четверть эллипса, задаваемого горизонтальным и вертикальным радиусами:
- Одно значение задаёт оба радиуса, создавая идеально круглый (симметричный) угол.
- Два значения задают горизонтальный радиус первым, а вертикальный — вторым, создавая эллиптический угол.
- Проценты вычисляются относительно блока элемента: горизонтальный радиус — это процент от ширины, вертикальный — процент от высоты.
Если значение не задано, радиус равен 0, и угол остаётся острым. Цвет фона или изображение обрезаются по скруглённому углу; изменить место обрезки можно с помощью свойства background-clip.
Несколько важных моментов:
- Отрицательные значения недопустимы — угол остаётся равным
0. - Свойство анимируемо, поэтому углы могут плавно меняться при
:hoverили с помощью ключевых кадров. - Поддержка браузерами универсальна во всех современных браузерах и во всех версиях Internet Explorer начиная с IE9.
border-bottom-right-radius — это полное (longhand) свойство. Если сокращённое свойство 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). | Play it » |
| % | Задаёт форму правого нижнего угла в процентах. | Play it » |
| initial | Устанавливает свойство в значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- border-radius — сокращённое свойство, задающее все четыре угла одновременно.
- border-top-left-radius, border-top-right-radius, border-bottom-left-radius — три других полных свойства для углов.
- background-clip — управляет обрезкой фона по скруглённым углам.