CSS свойство border-top-right-radius устанавливает скругленную форму правого верхнего угла элемента. Возможны три типа скругления: круг или эллипс, или значение 0, при котором угол будет квадратным. При использовании фонового изображения или цвета, фон также будет срезан указанным радиусом границы. Этот процесс устанавливается значением свойства background-clip.
CSS свойство border-top-right-radius имеет две значения: длина и процент. Свойство border-top-right-radius указывает на горизонтальный и вертикальный радиус, который устанавливает скругленный правый верхний угол для границы блока.
При наличии только одного значения, оно определяет и горизонтальный, и вертикальный радиус эллипса. Если имеем две значения, первое из них устанавливает горизонтальный радиус, а второе - вертикальный радиус.
Процент для горизонтального радиуса указывает на толщину блока, а процент для вертикального радиуса - на высоту блока. Отрицательные значения недопустимы.
| Значение по умолчанию | 0 |
| Применяется | Ко всем элементам, а также к ::first-letter . |
| Наследуется | Нет |
| Анимируемое | Да. Правая верхняя граница анимируема. |
| Версия | CSS3 |
| DOM синтаксис | object.style.borderTopRightRadius = "25px"; |
Синтаксис
border-top-right-radius: length | % | initial | inherit;Рассмотрим пример, где использовано только одно значение. Оно устанавливает верхнюю и правую границу эллипса.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Пример border-top-right-radius.</h2>
<div></div>
</body>
</html>Рассмотрим другой пример, где использованы две значения. Первое из них устанавливает верхнюю границу эллипса, а второе - правую границу эллипса.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Пример border-top-right-radius.</h2>
<div></div>
</body>
</html>Другой пример с процентами:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</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.</h2>
<div></div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| length | Устанавливает скругленную форму для правого верхнего угла. |
| % | Устанавливает скругленную форму для правого верхнего угла в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 4.0+ | 4.0+ | 5.0+ | 10.5+ |
Практикуйте свои знания
