СSS Свойство border-radius
Пример
Добавить закругленные углы к двум элементам <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Редактор кода »
Определение и использование
Свойство border-radius определяет радиус углов элемента.
Совет: Это свойство позволяет добавлять закругленные углы к элементам!
Это свойство может иметь от одного до четырех значений. Вот такие правила:
Четыре значения - border-radius: 15px 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу):
Три значения - border-radius: 15px 50px 30px; (первое значение применяется к верхнему левому углу второе значение применяется к верхнему правому и нижнему левому углам, а третье значение применяется к нижнему правому углу):
Два значения - border-radius: 15px 50px; (первое значение относится к верхнему левому и нижнему правому углам, а второе - к верхнему правому и нижнему левому углам):
Одно значение - border-radius: 15px; (значение применяется ко всем четырем углам, которые закруглены одинаково:
| Значение по умолчанию: | 0 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Попробовать |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderRadius="25px" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -webkit- или -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;
}
/* эквивалентно:
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;
}
/* эквивалентно:
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 Закругленные углы
HTML DOM справочник: Свойство borderRadius
