Свойство CSS border-radius
Пример
Добавьте закругленные углы к двум элементам <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство border-radius
определяет радиус углов элемента.
Совет: это свойство позволяет добавлять к элементам закругленные углы!
Это свойство может иметь от одного до четырех значений. Вот правила:
Четыре значения - радиус границы: 15px 50px 30px 5px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому углу, третье значение применяется к нижнему правому углу, а четвертое значение применяется к нижнему левому углу):
Три значения - радиус границы: 15px 50px 30px; (первое значение применяется к верхнему левому углу, второе значение применяется к верхнему правому и нижнему левому углам, а третье значение применяется к нижнему правому углу):
Два значения - радиус границы: 15px 50px; (первое значение применяется к верхнему левому и нижнему правому углам, а второе значение применяется к верхнему правому и нижнему левому углам):
Одно значение — border-radius: 15px; (значение относится ко всем четырем углам, которые закруглены одинаково:
Значение по умолчанию: | 0 |
---|---|
Унаследовано: | нет |
Анимация: | да. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.borderRadius="25px" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
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;
Примечание . Четыре значения для каждого радиуса даны в следующем порядке: верхний левый, верхний правый, нижний правый, нижний левый. Если нижний левый опущен, он совпадает с верхним правым. Если нижний правый опущен, он совпадает с верхним левым. Если верхний правый опущен, это то же самое, что и верхний левый.
Значения свойств
Value | Description | Play it |
---|---|---|
length | Defines the shape of the corners. Default value is 0. Read about length units | |
% | Defines the shape of the corners in % | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about 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
Справочник по HTML DOM: свойство borderRadius