Элементы сайта

Как закруглить углы в 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>