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

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