CSS :: Свойство border-top-right-radius
css-свойство border-top-right-radius (от англ. border top right radius – верхний правый радиус границы) используется для скругления верхнего правого угла элемента. При этом border-top-right-radius срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента.
Характеристики
- Значение по умолчанию: 0.
- Применяется: ко всем элементам, за исключением таблиц с border-collapse: collapse.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.borderTopRightRadius="value".
Синтаксис
border-top-right-radius: <радиус>{1,2}
Значения
Любые доступные в CSS единицы измерения (смотреть), а также проценты, отсчет которых производится относительно ширины блока.
Если подразумевается сгругление границ по эллипсу, свойству следует передавать через пробел сразу два радиуса.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-border-radius
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/border-top-right-radius
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <title>Пример №1</title> <style> p{ margin-top: 5em; padding: 2em; width: 400px; min-height: 40px; border: solid 15px green; } /* Скругление углов по окружности */ .border_1{ border-top-left-radius: 15px; border-top-right-radius: 30px; border-bottom-right-radius: 15px; border-bottom-left-radius: 30px; } /* Скругление углов по эллипсу */ .border_2{ border-top-left-radius: 1em 2.5em; border-top-right-radius: 1em 2.5em; border-bottom-right-radius: 1em 2.5em; border-bottom-left-radius: 1em 2.5em; } </style> </head> <body> <p class="border_1"> Скругление углов по окружности<br> border-top-left-radius: 15px;<br> border-top-right-radius: 30px;<br> border-bottom-right-radius: 15px;<br> border-bottom-left-radius: 30px; </p> <p class="border_2"> Скругление углов по эллипсу<br> border-top-left-radius: 1em 2.5em;<br> border-top-right-radius: 1em 2.5em;<br> border-bottom-right-radius: 1em 2.5em;<br> border-bottom-left-radius: 1em 2.5em; </p> </body> </html>
Пример №1