Как закруглить углы 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 border-radius: http://finego.ru/tools/border-radius-generator