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