Как закруглить углы CSS

CSS3 позволяет вебмастеру закруглять углы. В этой статье вы увидите всевозможные эффекты, которых можно добиться с помощью этого свойства.

Перед изучением закругления углов в css, рекомендую ознакомиться с предыдущими уроками по теме:
Границы css и отступы - margin и padding.

border-radius – универсальное свойство, которое позволяет добиться скругления углов рамки элемента. Это свойство, однако, работает только в современных браузерах.
Для того, чтобы закругление работало и в некоторых старых версиях браузеров, используют специальные приставки:

-webkit-border-radius	Для браузеров Chrome вплоть до 4.0, Safari до 5.0, iOS
-moz-border-radius	Firefox до 4.0

Самая большая проблема с border-radius возникает в IE (работает с 9 версии), в Opera – c 10.5.
border-radius указывают для каждой стороны границы:

свойство	значение радиус скругления
border-top-right-radius	верхнего правого угла
border-bottom-right-radius	нижнего правого угла
border-bottom-left-radius	нижнего левого
border-top-left-radius	верхнего левого
border-radius	универсальное

Значения border-radius:

пиксели,
проценты от ширины блока,
em,
значения могут быть заданы через слеш ( / ). Первое значение (до слеша) задает радиус для ширины, а второе - для высоты блока.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
</head>
<body>
<style>
div {width: 84px;
padding: 5px;
background: #ffcecf;
border: 1px solid black;
border-radius: 15px;
}
</style>
<div>border radius

           </div>
           </body>
</html>

Результат:

Для того, чтобы этот код работал в старых вервиях Chrome и Firefox дублируем свойства, прописывая их с приставками -webkit и –moz:

border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;

Пример задания неравномерного закругления углов:

border-radius: 25px/5px;

Сокращенная запись border-radius: значения указываются через пробел или слеш. Возможно указание /*

одного значения – в этом случае правило распространяется на весь блок. Пример:

border-radius: 15px;
двух – первое число указывает радиус закругления для верхнего левого и нижнего правого, а второе – для верхнего правого и нижнего левого. Пример:

border-radius: 25px 5px;
трех – первое – для верхнего левого, второе – для верхнего правого и нижнего левого и третье – для нижнего правого:

border-radius:25px 5px 10px;
четырех – для каждого угла в отдельности, начиная с верхнего левого и далее по часовой стрелке. Схема:

Пример:

border-radius:25px 5px 10px 1px;

Для тех, кто не любит писать коды вручную, есть генератор для закругления углов css.
Вам может также понадобиться генератор закругления уголков изображения.

Как закруглить углы CSS

Опубликовано Иванова Наталья

Один ответ к «Как закруглить углы CSS»

Добавить комментарий Отменить ответ