Как сделать закругленные углы CSS: описание + CSS генераторы

Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий.

В общем, пришлось детально разбираться с вопросом, узнавать, что за свойство такое border-radius, какие параметры в нем можно указывать и т.п. Для упрощения задачи даже нашел специальные сервисы генераторы закругленной рамки на CSS. Обо всем этом я вам сегодня и расскажу.

Свойство border-radius

Для создания круглых блоков используется CSS свойство border-radius. Фактически оно задает радиус закругления рамки элемента. Если у него нет рамки, то применяется для фона. Работает также и с фоновой картинкой.

Код для элементов на скриншоте выше:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border-radius</title>
<style>
div {
    float: left;
    margin: 10px;
    padding: 20px;
    width: 170px;
    height: 130px;    
}
 
#rcorners1 {
    border-radius: 25px;
    border: 2px solid #213B8A;    
}
 
#rcorners2 {
    border-radius: 25px;
    background: #8BA1E3;
}
 
#rcorners3 {
    border-radius: 25px;
    background: url(patt1.jpg);
    background-position: left top;
    background-repeat: repeat;
} 
 
</style>
</head>
<body>
<div id="rcorners1">Пример Border-radius 1</div>
<div id="rcorners2">Пример Border-radius 2</div>
<div id="rcorners3">Пример Border-radius 3</div>
</body>
</html>

Border-radius не срабатывает в таблицах с установленным border-collapse: collapse.

Синтаксис свойства следующий:

border-radius: &lt;радиус&gt;{1,4} [ / &lt;радиус&gt;{1,4}]

То есть для него может задаваться от 1 до 4х параметров (в пикселях или процентах).

Одно значение: для всех углов сразу;
Два: первое значение для левого верхнего и правого нижнего углов, второе — для правого верхнего и левого нижнего;
Три: первое значение для левого верхнего угла, второе для верхнего правого и нижнего правого, третье — для правого нижнего;
Четыре: отвечает за углы в такой последовательности — левый верхний, правый верхний, правый нижний, левый нижний (по аналогии с заданием отступов).

Также параметры закругления углов в CSS могут быть заданы отдельно для каждого из них с помощью соответствующих свойств:

border-top-left-radius;
border-top-right-radius;
border-bottom-right-radius;
border-bottom-left-radius.

Причем в качестве параметра может использоваться одно либо два числа. В первом случае параметр задает радиус закругления по окружности, во втором — получается сначала горизонтальный, а затем вертикальный радиусы эллипсоида.

Для border-radius также можно задавать круглые углы в виде эллипсоида. При этом используется слеш «/». Параметры до слеша указывают горизонтальный радиус, после — вертикальный. Например:

Поддержка border-radius разными браузерами

В таблице ниже можете увидеть минимальные версии браузеров, начиная с которых они начали полностью поддерживать свойство border-radius.

Для ранних версий Chrome, Safari, Firefox использовались специальные префиксы дабы реализовать закругленные углы CSS. Для первых двух это свойство -webkit-border-radius, для последнего -moz-border-radius. Вот как выглядит код стилей с поддержкой ранних версий браузеров:

#rcornersall {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

Генераторы закругленных углов CSS

В сети можно найти разные сервисы, которые упрощают задачу создания закругленной рамки в CSS. Вы вполне можете использовать их в своей работе, а первая часть статьи позволит понимать сформированный код. Найти данные проекты не сложно, гуглите по ключу border radius generator. Вот парочка наиболее интересных проектов:

CSS Round

Предлагает максимальное число параметров: цвет фона, рамки, а также прозрачность и тень. Единственное, что итоговый код формируется в виде HTML, и придется «извлекать» из него CSS стили.

CSS Matic

Также максимально простой сервис создания круглых блоков на CSS. Удобно, когда все это реализовано в виде ползунков, и сразу видно внешний вид итогового блока.

Border Radius Generator

Инструмент с сайта developer.mozilla.org, где можете изменять форму блока непосредственно в самом элементе. Очень удобное и оригинальное решение.

CSS 3.0 Maker

Про CSS 3.0 Maker уже когда-то рассказывал, тут есть разные функции в том числе и border-radius. Сгенерированный код поддерживается всеми современными браузерами.

CSS3 Rounded Corner Generator

На всякий случай привожу еще один простой генератор, позволяющий сделать круглые углы, вдруг какой-то из сервисов выше не будет работать. Настройки здесь максимальной простые, можно выбрать тип рамки. Итоговый код универсальный.

Возможно, новичкам сходу сложно будет разобраться как сделать закругленные углы CSS с помощью border-radius, но тут на самом деле все просто. Еще раз внимательно просмотрите первую теоретическую часть статьи и проанализируйте сгенерированный сервисами код. Если будут вопросы, пишите их в комментариях.

2 комментария к статье “Как сделать закругленные углы CSS: описание + CSS генераторы”

Андрей Зенков

06.03.2016

А в чем разница между тем, что я буду делать загругление кодом или генератором?
Tod

06.03.2016

Андрей, ни в чем, генератор отдает на выходе такой же код. Просто для его использования не нужны знания по CSS (управляется все через настройки).

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