- border-radius
- Синтаксис
- Значения
- Браузеры
- CSS Rounded Corners
- CSS border-radius Property
- Example
- CSS border-radius — Specify Each Corner
- Example
- Example
- CSS Rounded Corners Properties
- border-radius
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Объектная модель
- Примечание
- Спецификация
- Браузеры
- См. также
- border-radius
- Синтаксис
- Значения
- Браузеры
border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
Число значений | Результат |
---|---|
1 | Радиус указывается для всех четырех уголков. |
2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка. |
3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка. |
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка. |
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Радиусы скругления в браузере Safari
Браузеры
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius .
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius .
CSS Rounded Corners
With the CSS border-radius property, you can give any element «rounded corners».
CSS border-radius Property
The CSS border-radius property defines the radius of an element’s corners.
Tip: This property allows you to add rounded corners to elements!
1. Rounded corners for an element with a specified background color:
2. Rounded corners for an element with a border:
3. Rounded corners for an element with a background image:
Example
#rcorners1 <
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners2 border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners3 border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
>
Tip: The border-radius property is actually a shorthand property for the border-top-left-radius , border-top-right-radius , border-bottom-right-radius and border-bottom-left-radius properties.
CSS border-radius — Specify Each Corner
The border-radius property can have from one to four values. Here are the rules:
Four values — border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):
Three values — border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):
Two values — border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):
One value — border-radius: 15px; (the value applies to all four corners, which are rounded equally:
Example
#rcorners1 <
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners2 border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners3 border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners4 border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
You could also create elliptical corners:
Example
#rcorners1 <
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners2 border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
#rcorners3 border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
CSS Rounded Corners Properties
Property | Description |
---|---|
border-radius | A shorthand property for setting all the four border-*-*-radius properties |
border-top-left-radius | Defines the shape of the border of the top-left corner |
border-top-right-radius | Defines the shape of the border of the top-right corner |
border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |
border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Краткая информация
Значение по умолчанию | 0 |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам, за исключением таблиц с border-collapse : collapse |
Анимируется | Да |
Синтаксис
Синтаксис
Описание | Пример | |
---|---|---|
Указывает тип значения. | ||
A && B | Значения должны выводиться в указанном порядке. | && |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,]* |
+ | Повторять один или больше раз. | + |
? | Указанный тип, слово или группа не является обязательным. | inset? |
Повторять не менее A, но не более B раз. | ||
# | Повторять один или больше раз через запятую. | # |
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.
Число значений | Результат |
---|---|
1 | Радиус указывается для всех четырёх уголков. |
2 | Первое значение задаёт радиус верхнего левого и нижнего правого уголков, второе значение — верхнего правого и нижнего левого уголков. |
3 | Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого уголков, а третье — для нижнего правого уголка. |
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголков. |
В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
Результат данного примера показан на рис. 2.
Объектная модель
Объект.style.borderRadius
Примечание
Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют свойство -webkit-border-radius .
Firefox до версии 4.0 использует свойство -moz-border-radius .
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
Базовый синтаксис | 9 | 12 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4 |
Проценты | 9 | 12 | 4 | 10.5 | 5 | 4 | |||
Эллиптические уголки | 9 | 12 | 1 | 10.5 | 3 | 3.5 |
Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5 |
Проценты | 2.1 | 4 | 10.5 | 5 | |||
Эллиптические уголки | 2.1 | 3.5 | 10.5 | 3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
Число значений | Результат |
---|---|
1 | Радиус указывается для всех четырех уголков. |
2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка. |
3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка. |
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка. |
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Радиусы скругления в браузере Safari
Браузеры
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius .
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius .