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