|
CSS3 Свойство border-radius
 Полный CSS Справочник
Пример
Добавить закругленные границы к элементу div:
div
{
border:2px solid;
border-radius:25px;
} |
Попробуйте сами » |
Поддержка Браузерами
Свойство border-radius поддерживается в IE9+, Firefox 4+, Chrome, Safari 5+ и Opera.
Определение и ИспользованиеСвойство border-radius - это стенографическое свойство для установки четырех свойств border-*-radius.
Совет: Это свойство позволяет вам добавлять закругленные границы к элементам!
| Значение по умолчанию: |
0 |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| JavaScript синтаксис: |
объект.style.borderRadius="5px" |
Синтаксис
| border-radius: 1-4 значения|% / 1-4 значения|%; |
Замечание: Четыре значения для каждого радиуса задаются в порядке верхний-левый, верхний-правый,
нижний-правый, нижний-левый. Если нижний-левый не указан, он берется равным
верхнему-правому. Если нижний-правый не указан, он берется равным верхнему-левому. Если верхний-правый
не указан, он берется равным верхнему-левому.
| Значение |
Описание |
| расстояние |
Определяет форму углов |
| % |
Определяет форму углов в % |
Пример 1
border-radius:2em;
эквивалентно:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
|
Пример 2
border-radius: 2em 1em 4em / 0.5em 3em;
эквивалентно:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
|
Смотрите ТакжеCSS3 уроки: CSS3 Границы
Полный CSS Справочник
|
