Свойство CSS border-radius
Свойство border-radius используется для создания скругленных углов внешней границы элемента.
Свойство border-radius является одним из свойств CSS3.
Это свойство является сокращенным для свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius, которые используются для задания углов элемента по отдельности. Однако свойство border-radius позволяет задать все четыре угла одновременно. Оно может принимать от одного до четырех значений.
Если указано четыре значения, они применяются к верхнему левому, верхнему правому, нижнему правому и нижнему левому углам соответственно. Если значение для нижнего левого угла опущено, оно по умолчанию принимается равным значению для верхнего правого угла. Если опущено значение для нижнего правого угла, оно по умолчанию принимается равным значению для верхнего левого угла. Если указано только два значения, первое применяется к верхнему левому и нижнему правому углам, а второе — к верхнему правому и нижнему левому. Если указано только одно значение, оно применяется ко всем четырем углам.
Свойство border-radius задается следующим образом:
- одно, два, три или четыре значения длины или процента, которые задают единый радиус для углов.
- необязательно слэш (
/) и одно, два, три или четыре значения длины или процента. Это используется для задания дополнительного радиуса, что позволяет создавать эллиптические углы.
Первый набор (1–4) значений определяет горизонтальный радиус для всех четырех углов. Необязательный второй набор значений, разделенный слэшем, определяет вертикальные радиусы для всех четырех углов. Если указан только один набор значений, они будут использоваться для определения как вертикальных, так и горизонтальных радиусов в равной степени.
| Начальное значение | 0 |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимация | Да. Каждое из свойств сокращенной записи анимируется. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.borderRadius = "20px"; (Примечание: в JavaScript используется camelCase borderRadius, в отличие от дефисного названия свойства CSS.) |
Синтаксис
Синтаксис свойства CSS border-radius
border-radius: <length> | <percentage> [ / <length> | <percentage> ]? | initial | inherit;Пример свойства border-radius:
Пример свойства CSS border-radius
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
width: 50%;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Border-radius example</h2>
<div></div>
</body>
</html>Результат
Пример с использованием процентов и пикселей:
Пример свойства border-radius с процентами и пикселями:
Пример свойства CSS border-radius с процентами и пикселями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-pixel {
height: 40px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-percent {
width: 120px;
height: 120px;
margin-top: 20px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-radius example with percent and pixel values</h2>
<div class="radius-pixel"></div>
<div class="radius-percent"></div>
</body>
</html>Вы также можете задать border-radius для элемента с цветом фона или фоновым изображением.
Пример свойства border-radius с свойствами background-color и background-image:
Пример свойства CSS border-radius с цветами фона и фоновыми изображениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.radius-bg {
width: 250px;
height: 200px;
background: #ccc;
border: 4px solid #1c87c9;
border-radius: 12px;
}
.radius-img {
width: 250px;
height: 200px;
margin-top: 20px;
background-color: lightgray;
background: url('https://www.w3docs.com/uploads/media/default/0001/01/6ef5dc22756f45ab51d0c510ad0371191ec4ff04.jpeg');
background-position: left top;
background-repeat: repeat;
border: 2px solid #1c87c9;
border-radius: 25px;
}
</style>
</head>
<body>
<h1> Border-radius example with background color</h1>
<div class="radius-bg"></div>
<h2> Border-radius example with background image</h2>
<div class="radius-img"></div>
</body>
</html>Примечание: в старых браузерах фоновые изображения могут не обрезаться по скругленным углам. Используйте background-clip: border-box; для обеспечения согласованного поведения.
Теперь рассмотрим пример с различными блоками, имеющими разные значения border-radius, которые формируют их форму.
Пример свойства border-radius с несколькими значениями:
Пример свойства CSS border-radius с разными значениями(%,px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 250px;
height: 150px;
border: solid 3px #1c87c9;
background: #1c87c9;
}
.radius_1 {
border-radius: 25px;
}
.radius_2 {
border-radius: 25% 10%;
}
.radius_3 {
border-radius: 10% 30% 50% 70%;
}
.radius_4 {
border-radius: 10% / 50%;
}
.radius_5 {
border-radius: 10px 100px / 120px;
}
.radius_6 {
border-radius: 25% 10%;
}
.radius_7 {
border-radius: 50% 20% / 10% 40%;
}
.radius_8 {
border-radius: 50%;
}
</style>
</head>
<body>
<h1> Border-radius examples</h1>
<div class="radius_1"></div>
<br />
<div class="radius_2"></div>
<br />
<div class="radius_3"></div>
<br />
<div class="radius_4"></div>
<br />
<div class="radius_5"></div>
<br />
<div class="radius_6"></div>
<br />
<div class="radius_7"></div>
<br />
<div class="radius_8"></div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| length | Задает размер скругления углов. | Запустить » |
| % | Задает размер скругления углов в процентах. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что делает CSS-свойство 'border-radius'?