Как закруглить углы в CSS. Свойство border-radius

Многие веб-сайты сегодня используют скругленные углы. Чтобы создать такую иллюзию, в HTML4 необходимо работать с изображениями и таблицами. Добавление иллюстраций гарантированно увеличит время загрузки, а также затруднит внесение изменений на странице. Проще использовать предложенное в CSS3 определение радиуса скругления

Значения свойства border-radius Описание Результат
border-radius: 15px; Радиус скругления всех четырех углов сразу 
border-radius: 0 15px; Первое значение – радиус левого верхнего и правого нижнего углов, второе значение – радиус правого верхнего и левого нижнего углов 
border-radius: 30px 20px 0; Первое значение – радиус левого верхнего угла, второе – одновременно правого верхнего и левого нижнего, а третье значение – правого нижнего
border-radius: 20px 15px 5px 0; Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. 
Пример 1. Рамка со скругленными углами вокруг абзаца

 Пример 1. Рамка со скругленными углами вокруг абзаца

Сворачивать рекламу, чтобы сберечь деньги, все равно, что останавливать часы, чтобы сберечь время. Хендерсон Стюарт Брит Настали времена, когда реклама поднялась до статуса науки. Клод Гопкинс

Рисунок 1. Величина радиуса границы - 15 px

Реклама - двигатель торговли: сотня двигает, один торгует. Хенрик Ягодзиньский Половина денег, которые идут на рекламу, выбрасываются впустую; но как узнать, какая именно половина? Уильям Гескет Левер

Рисунок 2. Величина радиуса границы - 25 px

HTML-документ к примеру 1 с таблицей стилей, размещенной в head

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<title>Скругленные углы</title>
<style>
.radius15{
border: 2px solid #f00;
padding:5px;
border-radius:15px; /* Все четыре угла закруглены радиусом 15 px */
}
.radius25{
border: 2px solid #f00;
padding:5px;
border-radius:25px; /* Все четыре угла закруглены радиусом 25 px */
}

</style>
</head>
<body>
<body>
<p class="radius15">

Сворачивать рекламу, чтобы сберечь деньги, все равно,
что останавливать часы, чтобы сберечь время. Хендерсон Стюарт Брит
Настали времена, когда реклама поднялась до статуса науки. Клод Гопкинс
<p class="radius25">
Реклама - двигатель торговли: сотня двигает,
один торгует. Хенрик Ягодзиньский
Половина денег, которые идут на рекламу, выбрасываются впустую;
но как узнать, какая именно половина? Уильям Гескет Левер
</body>

Пример 2. Анимационные закладки с гиперссылками

Наведите мышь на закладку

Закладка 1 Закладка 2 Закладка 3

Рисунок 3

HTML-документ к примеру 2 с таблицей стилей, размещенной в head

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<title>Скругленные углы</title>
<style>
.tabEffect {
font-family:Arial;
font-size:15px;
font-weight:bold;
background-color:#ff0;
border: 4px solid #f00;
padding:10px;
margin:5px;
color:#f00;
text-decoration:none;
border-radius: 15px 15px 0px 0px; /* Радиус закругления углов
последовательно:
верхний левый, верхний правый,
нижний правый, нижний левый*/
}
.tabEffect:hover {
background-color:#f00;
border: 4px solid #ff0;
color:#ff0;
}
</style>
</head>
<body>
<br><br>
<a class="tabEffect" href="#">Закладка 1</a>
<a class="tabEffect" href="#">Закладка 2</a>
<a class="tabEffect" href="#">Закладка 3</a>
</body>

Пример 3. Закругляем уголки у картинки

Рисунок 4. Картинка со скругленными углами

HTML-документ к примеру 3 с таблицей стилей, размещенной в head

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<title>Скругленные углы</title>
<style>
.radius-img {
border:2px solid orange;
border-radius: 25px;
</style>
</head>
<body>
<img class="radius-img" src="border-radius-6.jpg">
</body>


Пример 4. Как создать круг и эллипс в HTML5 и CSS3?

Как создать круг в HTML5 и CSS3?


Рисунок 5. Круг средствами CSS3

Для того чтобы создать круг при помощи border-radius необходимо
Ширина блока = Высота блока = Скругление углов

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<title>Как создать круг</title>
<style>
.krug {
background:#ff0;
border: 2px solid red;
width: 100px; /* Ширина блока */
height: 100px; /* Высота блока */
border-radius: 100px; /* Скругление углов */
}
</style>
</head>
<body>
<div class="krug"></div>
</body>
</pre>
</div>


Как создать эллипс в HTML5 и CSS3


Рисунок 6. Эллипс средствами CSS3

Для создания эллипса необходимо указать горизонтальный и вертикальный радиусы:
border-radius: 200/100;
В данном случае горизонтальный = 200px, Вертикальный = 100px. Ширина блока width должна равняться двум горизонтальным радиусам, т.е. 400px, а высота блока height должна равняться двум вертикальным радиусам, т.е. 200px.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251" />
<title>Как создать эллипс</title>
<style>
.ellips {
background:#ff0;
border: 2px solid red;
width: 400px; /* Ширина блока */
height: 200px; /* Высота блока */
border-radius: 200px/100px; /* Скругление углов */
}
</style>
</head>
<body>
<div class="ellips"></div>
</body>
</pre>
</div>