CSS border-radius Свойство
Пример
Добавьте скругленные границы в два элемента <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Подробнее примеры ниже.
Определение и использование
Свойство border-radius определяет радиус углов элемента.
Совет: Это свойство позволяет добавлять округленные границы к элементам!
Это свойство может иметь от одного до четырех значений. Вот правила:
Четыре значения-граница-радиус: 15пкс 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, и четвертое значение применяется к нижнему левому углу):
Три значения-граница-радиус: 15пкс 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему и нижнему левому углам, а третье значение применяется к нижнему правому углу):
Два значения-граница-радиус: 15пкс 50px; (первое значение применяется к верхнему левому и нижнему углам, а второе значение применяется к верхнему и нижнему левому углам):
Одно значение-граница-радиус: 15пкс; (значение применяется ко всем четырем углам, которые округляются одинаково:
| Значение по умолчанию: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.borderRadius="25px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Синтаксис CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Примечание: Четыре значения для каждого радиуса приведены в верхнем левом, верхнем правом, нижнем правом, нижнем левом. Если нижний левый опущен, то он такой же, как верхний правый. Если нижний правый опущен, то он совпадает с верхним левым. Если верхний правый опущен, то он совпадает с верхним левым.
Значения свойств
| Значение | Описание | |
|---|---|---|
| length | Определяет форму углов. Значение по умолчанию — 0. Читать о единицах длины | |
| % | Определяет форму углов в % | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Задать скругленные углы для элемента с цветом фона:
#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;
}
Пример
Также обратите внимание на это:
#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 Справочник: CSS Rounded Corners
HTML DOM Справочник: borderRadius Свойство