HOW YOU CAN SUPPORT UKRAINE

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

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

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

Свойство border-radius

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

Закругленные углы 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х параметров (в пикселях или процентах).

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

Примеры использования border-radius

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

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

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

Параметры свойства border-radius

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

Закругление углов в CSS с помощью border-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

CSS Round

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

CSS Matic

CSS Matic

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

Border Radius Generator

Border Radius Generator

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

CSS 3.0 Maker

CSS 3.0 Maker

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

CSS3 Rounded Corner Generator

CSS3 Rounded Corner Generator

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

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

2 комментария к статье “Как сделать закругленные углы CSS: описание + CSS генераторы”
  1. А в чем разница между тем, что я буду делать загругление кодом или генератором?

  2. Tod

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

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

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *