Свойство CSS border-top-right-radius
Свойство CSS border-top-right-radius скругляет правый верхний угол элемента. Синтаксис, одно и два значения, проценты.
Свойство CSS border-top-right-radius скругляет правый верхний угол рамочного блока элемента. Это одно из четырёх развёрнутых свойств, в которые раскрывается сокращение border-radius — остальные три: border-top-left-radius, border-bottom-right-radius и border-bottom-left-radius. Используйте это свойство, когда нужно скруглить только один угол, не затрагивая остальные три.
Данное свойство относится к числу свойств CSS3.
Форма скругления зависит от заданных значений:
- Острый угол — если радиус равен
0(значение по умолчанию), угол остаётся острым. - Круглый угол — если задано одно значение (или два одинаковых), угол представляет собой четверть окружности указанного радиуса.
- Эллиптический угол — если заданы два разных значения, угол представляет собой четверть эллипса.
Если у элемента есть фоновое изображение или цвет фона, он обрезается по скруглённой границе. Степень обрезки задаётся свойством background-clip.
Свойство принимает значения length, percentage, initial и inherit и задаёт горизонтальный и вертикальный радиусы скруглённого правого верхнего угла. При указании одного значения оно задаёт и горизонтальный, и вертикальный радиусы (круглый угол). При указании двух значений первое задаёт горизонтальный радиус, а второе — вертикальный (эллиптический угол). Проценты для горизонтального радиуса вычисляются относительно ширины блока, для вертикального — относительно его высоты. Отрицательные значения не допускаются.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируемо | Да. Правый верхний угол границы поддерживает анимацию. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.borderTopRightRadius = "25px"; |
Синтаксис
Синтаксис свойства CSS border-top-right-radius
border-top-right-radius: length | % | initial | inherit;Рассмотрим пример, в котором используется только одно значение. Оно задаёт как горизонтальный, так и вертикальный радиусы эллипса.
Пример свойства border-top-right-radius:
Пример свойства CSS border-top-right-radius с одним значением
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Результат
Если задать два значения, первое определяет горизонтальный радиус, а второе — вертикальный, что создаёт эллиптический угол.
Пример свойства border-top-right-radius с двумя значениями:
Пример свойства CSS border-top-right-radius с двумя значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Пример свойства border-top-right-radius в процентах:
Пример свойства CSS border-top-right-radius со значением в % (процентах)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Когда применять
Используйте border-top-right-radius (вместо сокращения border-radius), когда скруглить нужно только правый верхний угол — например, ведущий угол вкладки, пузыря чата или карточки, у которой остальные углы должны оставаться острыми. Чтобы скруглить все четыре угла сразу, короче использовать сокращение border-radius:
/* Round only the top-right corner */
border-top-right-radius: 12px;
/* Round all four corners at once */
border-radius: 12px;Значения
В таблице ниже перечислены допустимые значения.
| Значение | Описание | Попробовать |
|---|---|---|
| length | Задаёт форму скругления правого верхнего угла. | Попробовать » |
| % | Задаёт форму скругления правого верхнего угла в %. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |