Скруглённые углы CSS
Скруглённые углы элемента задаются одним свойством CSS: border-radius.
Свойство CSS border-radius
border-radius управляет тем, какой радиус получает каждый угол элемента.
Свойство работает с любым элементом, у которого есть background-color, border или background-image.
Совет: За этим сокращённым свойством стоят полные свойства border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.
Пример
У каждого из этих трёх блоков скруглённые углы: первый — с фоновым цветом, второй — с рамкой, третий — с фоновым изображением.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius Basics</title>
<style>
#div1 {
border-radius: 25px;
background-color: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS border-radius Property</h2>
<p>Rounded corners for an element with a background color:</p>
<div id="div1">
<p>Rounded corners!</p>
</div>
<p>Rounded corners for an element with a border:</p>
<div id="div2">
<p>Rounded corners!</p>
</div>
<p>Rounded corners for an element with a background image:</p>
<div id="div3">
<p>Rounded corners!</p>
</div>
</body>
</html>
CSS border-radius - Указание каждого угла
border-radius может принимать от одного до четырёх значений, и их количество определяет, к каким углам относится каждое значение.
border-radius: 15px 50px 30px 5px; - при четырёх значениях углы назначаются по очереди: верхний левый, верхний правый, нижний правый и, наконец, нижний левый.
border-radius: 15px 50px 30px; - при трёх значениях верхний левый получает первое, верхний правый и нижний левый делят второе, а нижний правый получает третье.
border-radius: 15px 50px; - при двух значениях верхний левый и нижний правый делят первое, а верхний правый и нижний левый делят второе.
border-radius: 15px; - при одном значении все четыре угла скругляются одинаково.
Пример
По одному блоку на каждый вариант сокращённой записи border-radius: одно, два, три и четыре значения.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border-radius - Specify Each Corner</title>
<style>
#div1 {
border-radius: 15px 50px 30px 5px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px 50px 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 15px 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 15px;
background: #04AA6D;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS border-radius - Specify Each Corner</h2>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<div id="div1"></div>
<p>Three values - border-radius: 15px 50px 30px:</p>
<div id="div2"></div>
<p>Two values - border-radius: 15px 50px:</p>
<div id="div3"></div>
<p>One value - border-radius: 15px:</p>
<div id="div4"></div>
</body>
</html>
Эллиптические и круглые формы CSS
Угол становится эллиптическим, когда его радиус имеет два значения, разделённых косой чертой /: сначала горизонтальный радиус, затем вертикальный.
Если установить border-radius в 50%, результат зависит от формы элемента: прямоугольный элемент становится овалом, а квадратный — кругом.
Пример
Здесь border-radius создаёт эллиптические, овальные и круглые формы.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Elliptical and Circular Shapes</title>
<style>
#div1 {
border-radius: 70px / 30px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div2 {
border-radius: 15px / 50px;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div3 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 150px;
}
#div4 {
border-radius: 50%;
background: #04AA6D;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2>CSS Elliptical and Circular Shapes</h2>
<p>Elliptical corner - border-radius: 70px / 30px:</p>
<div id="div1"></div>
<p>Elliptical corner - border-radius: 15px / 50px:</p>
<div id="div2"></div>
<p>Oval shape - border-radius: 50% (rectangular element):</p>
<div id="div3"></div>
<p>Circle shape - border-radius: 50% (square element):</p>
<div id="div4"></div>
</body>
</html>