- border-radius
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Объектная модель
- Примечание
- Спецификация
- Браузеры
- См. также
- CSS border-radius Property
- Browser Support
- CSS Syntax
- Property Values
- More Examples
- Example
- Example
- Example
- Example
- CSS Rounded Corners
- CSS border-radius Property
- Example
- CSS border-radius — Specify Each Corner
- Example
- Example
- CSS Rounded Corners Properties
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 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
CSS border-radius Property
The border-radius property defines the radius of the element’s corners.
Tip: This property allows you to add rounded corners to elements!
This 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:
Default value: | 0 |
---|---|
Inherited: | no |
Animatable: | yes. Read about animatable Try it |
Version: | CSS3 |
JavaScript syntax: | object.style.borderRadius=»25px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
CSS Syntax
Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
Property Values
Value | Description | Demo |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | Demo ❯ |
% | Defines the shape of the corners in % | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Set rounded corners for an element with a background color:
Example
Set rounded corners for an element with a border:
#rcorners2 <
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>
Example
Set rounded corners for an element with a background image:
#rcorners3 <
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
>
Example
#example1 <
border-radius: 2em / 5em;
>
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 border-radius: 2em 1em 4em / 0.5em 3em;
>
/* is equivalent to:
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; */
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 |