УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Свойство border-radius


CSS Справочник Полный CSS Справочник

Пример

Добавить закругленные границы к элементу div:

div
{
border:2px solid;
border-radius:25px;
}

Попробуйте сами »

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство 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 Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS