Как сделать круглый border
Скруглённые уголки
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div | Радиус скругления для всех уголков сразу. |  |
| div | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Использование эллиптических уголков
Свойство Border-radius. Закругление рамок в CSS.
Пояснения к статье:
В этой статье мы поговорим с вами о создании рамок, но не обычных квадратных, а закругленных. Они имеют более красивый вид чем обычные квадратные рамки без закругления.
Свойство border-radius > расширяя пространство для творческих идей увеличивая количество возможных элементов дизайна. А в совокупности с изменением стилизации рамок, с помощью значений свойства border >, можно создать особенную рамку, которую вы больше нигде не найдете.
В этой статье мы подробно рассмотрим создание круглых рамок и не только. В CSS присутствует такая вещь, как треугольные рамки, но об этом ниже.
Закругление рамок при помощи
Данное CSS свойство позволяет закруглять границы элемента. Некоторые разработчики используют его без создания видимых рамок, для создания макетов на округлом контейнере «body».
С помощью стандартных радиусов можно создавать округлые фигуры, например круг или овал.
Само свойство border-radius > является сокращенной записью четырех свойств: border-top-left-radius >, border-top-right-radius >, border-bottom-right-radius > и border-bottom-left-radius >. Каждое из них задает радиус закругления для каждого из четырех углов.
Простое свойство border-radius > может применять как одно, так и 4 значения. Работает также, как со свойством margin > или padding >.
Закругление может применяться ко всем HTML элементам, но не во всех случаях. Некоторые браузеры не воспринимают его при загрузке рамок, которые имеют свойство border-collapse >, со значением «collapse».
Для определения радиуса закругления можно использовать разные величины, но чаще всего значение задается в пикселях. Это связано с тем, что они лучше всего подходят для детализации элементов малого размера.
Кроме обычного закругления можно использовать дополнительный радиус, например для создания эллипса.
Для этого необходимо разделить значения дробью.
Свойство — примеры:
Сейчас мы покажем пару примеров создания закругленной границы. Чтобы изучить их подробнее скачайте наши исходники.
Создание треугольников при помощи
Для создания треугольников необходимо использовать свойство border >. Но здесь его использование будет немного отличаться от создания обычных рамок.
Для начала задайте нулевую ширину и высоту для элемента с треугольником.
После этого запишите несколько свойств. Первое — главное, свойство рамки. Создается почти также, как и обычно. Задаем ширину, тип линии и вписываем значение «transparent». Оно отвечает за создание треугольника.
Внимание! При создании обычных рамок мы рекомендовали вам задавать маленькую ширину, указывая небольшое значение в пикселях. Здесь же, для отображения, можно использовать более крупные величины, либо же увеличить значения в пикселях.
Для того, чтобы создать ровную сторону треугольника нужно создать отдельную линию рамки для этой стороны.
Заключение
Теперь вы знаете все о свойстве border-radius >, которое позволит вам создавать уникальные элементы дизайна. Кроме того, треугольники, созданные при помощи «border», станут отличными декоративными частями, которые можно разместить на любой веб-странице.
Поначалу это может показаться очень сложным, но если практиковаться, то все легче чем вы думаете. Скачивайте наши исходники и изучайте их код, для лучшего понимания работы свойства. Желаем удачи в изучении!
Закруглённые углы (свойство border-radius) | CSS
Генератор border-radius CSS
Как сделать закругленные углы CSS
Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.
background box-shadow outline [решение] border-image [решение]
Круглые углы у картинки
border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения. 
Закруглить края у видео на YouTube
HTML таблица с закругленными углами
Закруглить таблицу можно, но с border-collapse: separate;
| 1 | 2 | 3 |
|---|---|---|
| 1.1 | 2.1 | 3.1 |
| 1.2 | 2.2 | 3.2 |
border-radius у вложенных элементов
Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы
CSS скругление углов у border-image
Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.
Округление outline
Закругление углов в примерах
HTML овал
HTML круг
Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.
HTML цилиндр
Закругленные три края, HTML капля
HTML полукруг
HTML лист
HTML яйцо
Камушек HTML
29 комментариев:
Если ставлю стиль
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
для другого див NMitra Пример на https://jsfiddle.net/ выложите и его ссылку дайте в комментариях, а лучше свою страницу. Можете сами попробовать разобраться в селекторах. Приоритетный тот, что длиннее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Вам что нужно: 15px или 50%? Fedor Timofeev Здравствуйте.
мне нужны и 15px и 50%? так как используются в абсолютно разных случаях.
Может из как то переименовать?
ссылка на страницу, где применяются оба класса: http://ex-hort.ru/
class=»grayscale grayscale-fade»
CSS: /*обесцвечивание круглой картинки */
img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>
/*обесцвечивание круглой картинки конец */
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */
img.grayscale <
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
cursor: pointer;
>
img.grayscale:hover <
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
filter:none;
>
.grayscale.grayscale-replaced > svg <
transition: opacity 1s ease;
opacity: 1;
>
.grayscale.grayscale-replaced.grayscale-fade:hover > svg <
opacity: 0;
>
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>
ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius <
border-radius: 15px;
background: #e7d5c0;
>
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */
Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»
img.grayscale <
width: 200px;
height: 200px;
border-radius: 50%;
>яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru
NMitra А я увидела в исходном коде не точку, а «яЛП»
По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.
Как сделать закругленные углы CSS: описание + CSS генераторы
Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий.
В общем, пришлось детально разбираться с вопросом, узнавать, что за свойство такое border-radius, какие параметры в нем можно указывать и т.п. Для упрощения задачи даже нашел специальные сервисы генераторы закругленной рамки на CSS. Обо всем этом я вам сегодня и расскажу.
Свойство border-radius
Для создания круглых блоков используется CSS свойство border-radius. Фактически оно задает радиус закругления рамки элемента. Если у него нет рамки, то применяется для фона. Работает также и с фоновой картинкой.
Код для элементов на скриншоте выше:
То есть для него может задаваться от 1 до 4х параметров (в пикселях или процентах).
Также параметры закругления углов в CSS могут быть заданы отдельно для каждого из них с помощью соответствующих свойств:
Причем в качестве параметра может использоваться одно либо два числа. В первом случае параметр задает радиус закругления по окружности, во втором — получается сначала горизонтальный, а затем вертикальный радиусы эллипсоида.
Для border-radius также можно задавать круглые углы в виде эллипсоида. При этом используется слеш «/». Параметры до слеша указывают горизонтальный радиус, после — вертикальный. Например:
Поддержка border-radius разными браузерами
В таблице ниже можете увидеть минимальные версии браузеров, начиная с которых они начали полностью поддерживать свойство border-radius.
Генераторы закругленных углов CSS
В сети можно найти разные сервисы, которые упрощают задачу создания закругленной рамки в CSS. Вы вполне можете использовать их в своей работе, а первая часть статьи позволит понимать сформированный код. Найти данные проекты не сложно, гуглите по ключу border radius generator. Вот парочка наиболее интересных проектов:
Предлагает максимальное число параметров: цвет фона, рамки, а также прозрачность и тень. Единственное, что итоговый код формируется в виде HTML, и придется «извлекать» из него CSS стили.
Также максимально простой сервис создания круглых блоков на CSS. Удобно, когда все это реализовано в виде ползунков, и сразу видно внешний вид итогового блока.
Инструмент с сайта developer.mozilla.org, где можете изменять форму блока непосредственно в самом элементе. Очень удобное и оригинальное решение.
Про CSS 3.0 Maker уже когда-то рассказывал, тут есть разные функции в том числе и border-radius. Сгенерированный код поддерживается всеми современными браузерами.
На всякий случай привожу еще один простой генератор, позволяющий сделать круглые углы, вдруг какой-то из сервисов выше не будет работать. Настройки здесь максимальной простые, можно выбрать тип рамки. Итоговый код универсальный.
Возможно, новичкам сходу сложно будет разобраться как сделать закругленные углы CSS с помощью border-radius, но тут на самом деле все просто. Еще раз внимательно просмотрите первую теоретическую часть статьи и проанализируйте сгенерированный сервисами код. Если будут вопросы, пишите их в комментариях.
А в чем разница между тем, что я буду делать загругление кодом или генератором?
Андрей, ни в чем, генератор отдает на выходе такой же код. Просто для его использования не нужны знания по CSS (управляется все через настройки).
border-radius
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Процентная запись | Да, относительно ширины блока |
| Применяется | Ко всем элементам, за исключением таблиц с border-collapse : collapse |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-border-radius |
Версии CSS
Описание
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех четырех уголков. |
| 2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка. |
| 3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка. |
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Радиусы скругления в браузере Safari