Как сделать скругление в css

Закругленные углы в CSS

Закругленные углы в CSS можно сделать многими способами, очень многими, причем некоторые из них можно считать уже устаревшими, так как в CSS 3 появились новые свойства, позволяющие закруглять углы у HTML-элементов. Однако, во-первых, старые браузеры не поддерживают эти свойства, а во-вторых, в креативном мозгу дизайнера порой рождаются такие идеи, что только старые способы и спасают. Поэтому здесь мы рассмотрим несколько различных вариантов позволяющих сверстать закругленные углы в CSS: от самых простых — до довольно сложных.

В данных примерах углы закругляются у изначально блочных элементов, также в некоторых примерах эти блоки задействуются в качестве вспомогательных элементов. Но помните, что вы с легкостью можете проделать то же самое и с элементами уровня строки, предварительно задав им display со значением block или inline-block, если это необходимо.

Закругленные углы в CSS 3 без изображений

В этом примере используются свойства из CSS 3, которые позволяют без проблем закруглять углы без помощи изображений.

Пример HTML и CSS: закругление углов с помощью CSS 3 без изображений

Описание примера

Свойства с префиксами отсутствуют в спецификации CSS, поэтому их использование приведет к невалидному коду.

Закругленные углы в CSS без изображений

В этом примере тоже нет изображений, однако используются дополнительные блоки. Суть метода состоит в том, что перед основным содержимым и после него, указывается несколько блоков, которые по мере удаления от него понемногу уменьшаются в ширине с помощью боковых внешних полей. Благодаря этому и происходит имитация закругления углов.

Данный способ плох тем, что код «замусоривается» дополнительными блоками, но, к сожалению, во многих примерах подобные блоки будут присутствовать. Еще один минус — при больших радиусах закругления придется добавлять еще больше блоков, чем используется в примере.

Пример HTML и CSS: закругление углов без использования изображений

Описание примера

Закругленные углы с помощью изображения

Самый простой способ, с помощью которого можно сделать в CSS видимость закругленных углов — это использование изображения в качестве фона для элемента. При этом обычно размеры элемента указываются такие же, как и размер фоновой картинки. Минус этого способа в том, что содержимое элемента не должно выходить за его рамки, то есть должно быть определенного ограниченного размера.

Пример HTML и CSS: закругление углов с использованием одного изображения

Описание примера

Закругленные углы с помощью боковых блоков

В предыдущем примере размер блока у нас был фиксированный и зависел от размера фоновой картинки, а это очень неудобно. Сейчас мы сделаем так, чтобы ширина нашего блока была изменяемой. Для этого вырежем у изображения три части — боковушки и кусочек центра. Затем поместим внутрь основного блока два элемента с фиксированными размерами, которые, благодаря абсолютному позиционированию, разместим у него по бокам. В качестве фона зададим им те самые боковые части, а основному блоку — центральную часть. Так у нас получится блок с закругленными углами, у которого будет изменяемая ширина.

Такой прием очень часто используется для закругления однострочных элементов, таких как ссылки или названия разделов/меню.

Пример HTML и CSS: закругление углов с использованием боковых блоков

Описание примера

В IE6 образуется небольшой баг с этим способом:

Если ширина или высота у «block» будет нечетной, то между внутренним краем блока и правой позиционированной боковушкой появится неприятный отступ в 1px, который будет портить всю картину. Этот баг можно исправить, использовав CSS хак с определенным expression, но я даже не буду здесь приводить такой пример, так как он часто «подвешивает» браузер и лучше его не применять.

Поступим по-другому. Зададим «right_bok» левое поле (CSS margin-left) размером в 100%, чтобы он сместился за правую границу основного блока, а затем вернем его обратно, сместив влево на число пикселей равных его ширине. Со значениями этих свойств IE6 работает правильно, поэтому ему ничего не остается, как поставить блок там, где нам надо.

Закругленные углы с помощью боковых псевдоэлементов

Этот способ закругления углов похож на предыдущий, но в отличие от него, здесь по бокам расставляются не HTML-элементы, а добавленные к основному блоку псевдоэлементы. Благодаря такому подходу удалось избавиться от лишнего HTML-код страницы.

Пример HTML и CSS: закругление углов с использованием боковых псевдоэлементов

Описание примера

Для IE6 и IE7 в этом примере были задействованы «костыли»:

Закругленные углы в CSS с помощью обертывания блоками

Суть этого способа заключается в том, что сначала у изображения вырезаются уголки. Затем внутрь основного блока помещается еще несколько блоков (по количеству уголков), которые вложены друг в друга. Каждому из них в качестве фона задается один уголок-изображение. Изображениям запрещают размножение и задают координаты, чтобы они заняли места по углам блоков. Таким образом и получается эффект закругленных углов.

Пример HTML и CSS: закругление углов с использованием обертывания блоками

Описание примера

Закругленные углы в CSS с помощью позиционирования

Здесь тоже вырезаются уголки для фона, который будет указан у маленьких блоков. С помощью абсолютного позиционирования CSS эти блоки расставляются по углам основного элемента, которому задается нужный цвет фона.

Пример HTML и CSS: закругление углов с использованием позиционирования

Описание примера

В IE6 есть пара проблем с этим способом:

Закругленные углы с помощью позиционирования и спрайта

По сути, технология этого способа закругления углов в CSS такая же, как и в предыдущем, поэтому подробные комментарии тут будут опущены. Единственное отличие — вместо отдельных фоновых изображений-уголков здесь используется одна общая картинка-спрайт. Благодаря этому ускоряется загрузка сайта, ведь одно изображение «весит» меньше, чем четыре и к хостингу идет одно обращение вместо четырех.

Спрайт — изображение, которое объединяет в себе сразу несколько картинок используемых в качестве фона для элементов сайта. Какая именно часть спрайта будет фоном у того или иного HTML-элемента зависит от координат заданных в специальном CSS-свойстве.

Пример HTML и CSS: закругление углов с использованием позиционирования и спрайтов

Описание примера

С IE6 здесь те же проблемы, что и в предыдущем примере.

Закругленные углы с помощью псевдоэлементов

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

Сами закругления мы сделаем, используя псевдоэлементы созданные у основного блока, но без применения к ним позиционирования.

И еще один момент. В предыдущих примерах уголки вырезались вместе с фоном внутри, а это не всегда нужно, особенно, если предполагается, что фон у блока с закругленными углами будет неоднородным. Поэтому фон внутри рамки здесь был сделан прозрачным (это позволяет формат PNG) и когда вырезали уголки — их внутренняя часть тоже оказалась прозрачной. Если нужно, то подобный подход вы тоже можете использовать в предыдущих примерах.

Пример HTML и CSS: закругление углов с использованием псевдоэлементов

Описание примера

Для IE6 и IE7 мы здесь применили уже знакомые вам «костыли» с внедрением HTML-кода, так как эти браузеры не понимают используемые здесь псевдоэлементы:

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

Еще один пример закругления углов с псевдоэлементами и без дополнительных блоков

Этот пример похож на предыдущий, но здесь для расстановки псевдоэлементов используется позиционирование. Благодаря такому подходу появилась возможность явно указывать высоту блока с закругленными углами.

Пример HTML и CSS: закругление углов, где можно изменять высоту блока

Описание примера

Так как этот способ похож на предыдущий, то опишу только их отличия.

И снова для IE6 и IE7 добавляем внутрь основного блока несколько дополнительных элементов с помощью expression, а код закрываем в условные комментарии. Вот только в этот раз мы даже не будем пытаться эмулировать псевдоэлементы, а поступим проще.

К слову сказать, на самом деле проще было бы все-таки эмулировать псевдоэлементы, как мы это сделали в предыдущем примере — так добавочный код был бы меньше. Но только не в IE6, для этого браузера понадобилось бы еще несколько «костылей» и, как следствие, пришлось бы писать два отдельных условных комментария — для IE6 и IE7, а это только раздуло бы код.

В Firefox этот способ работает корректно с версии 3.6, а в Opera — с версии 10.0, костыли для них я придумывать не стал, так как это малоактуально.

Источник

Как сделать закругление в css

CSS Закругленные границы

Свойство border-radius используется для добавления закругленных границ к элементу:

Более закругленная граница

Пример

Больше примеров

Все свойства верхней границы в одном объявлении
В этом примере демонстрируется сокращенное свойство для установки всех свойств верхней границы в одном объявлении.

Установите стиль нижней границы
В этом примере показано, как установить стиль нижней границы.

Установите ширину левой границы
В этом примере показано, как установить ширину левой границы.

Установите цвет четырех границ
В этом примере показано, как установить цвет четырех границ. Может иметь от одного до четырех цветов.

Установите цвет правой границы
В этом примере показано, как установить цвет правой границы.

Проверьте себя с помощью упражнений!

Все свойства CSS границ

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Как реализовать закругления уголков у фигуры CSS?

Я пробую так, но не получается добиться скругления, как на скрине.

Стандартное решение — использование псевдоэлементов, border-radius и transform: rotate() :

Самый простой способ получить закругленные уголки у любой фигуры CSS, без изменения вёрстки, это применить к фигуре svg фильтр.

Добавлен фильтр в CSS

Радиус закругления можно регулировать с помощью stdDeviation=»3″

Другие фигуры CSS

Во всех примерах берутся фигуры CSS и уголки закругляются с помощью фильтра SVG — feColorMatrix

Способы скругления углов: преимущества и недостатки

В последнее время наблюдается тенденция популяризации блоков с скругленными углами. Этому скруглению начали подвергать почти все подряд: скругленные регионы страниц сайта, скругленные фото, скругленные меню и прочее. Ниже показан пример скругления на одном из сайтов компании Bizonoff:

Здесь мы видим не только скругленные блоки с картинками, но и скругленную кнопку. Для полного набора не хватало еще и скругленного меню, но я думаю глядя на это можно легко себе представить и скругленное меню.

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

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

Стоит обратить внимание, что интернет- пространство забито огромным количеством разнообразных способов решения нашей задачи, однако все подряд мы рассматривать не будем. Внимание будет уделено только достойнейшим. Мы оказывали предпочтения способам исходя из следующих критериев:

Ниже будут приведены выбранные нами способы.

CSS-свойство border-radius

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

К существенным преимуществам этого метода можно отнести:

Однако, несмотря на наличие такого мощного списка приемуществ, способ имеет свою темную сторону:

Стоит отметить, что значительно улучшил ситуацию кроссбраузерности выход нового плагина CSS3 PIE. Это позволило оптимизировать взаимодействие CSS3, расширения браузеров и нового плагина, что в свою очередь позволило охватить более 90% существующих браузеров. На основании этого можно утверждать, что с этого момента при использовании border-radius основная информация ресурса будет считываться и обрабатываться соответственным программным обеспечением.

Пример кода с использованием свойства border-radius

А таким образом код обработается в браузере:

На заметку

Скруглеяем блоки вырезанными картинками

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

Стоит отметить, что лучше всего собрать все углы в одну картинку, это позволит уменьшить количество внешних файлов, что в свою очередь снизит нагрузку по запросам на сервер. Ниже показан увеличенный пример такой картинки.

А вот код, согласно которому можно реализовать скругление в соответствии с описуемым способом:

На выходе из браузера получим примерно туже картину, которую наблюдали в первом способе

К преимуществам метода можно отнести следующие показатели:

Однако недостатков оказалось немного больше, чем достоинств:

Плагин jQuery.corner

Почти такой же эффект скругления, который представлен в двух предыдущих способах, можно получить, воспользовавшись специальным плагином для jQuery. Код этого плагина находится на специализированной странице. Там можно найти не только углы круглой формы, а прочие разнообразные варианты их представления. Акцентирую внимание на том, что на этой же странице будет доступна для скачивания последняя версия плагина.

Какие приемущества можно отметить для этого метода?

В тоже время имеет место ряд недостатков:

Следует отметить, что это не весь перечень проблем плагина, а лишь та малая часть, которая была обнаружена при первых десяти минутах анализа. Вследствие этого не вижу причин продолжать исследование этого способа и тратить свое драгоценное время.

js библиотека rocon

В качестве решения рассматриваемой задачи можно применять авторские библиотеки разных веб-разработчиков. Одна из таки библиотек принадлежит авторству С. Чикуёнку.

Эта библиотека без проблем скругляет углы контейнеров с однотонным фоном на абсолютно любых других подложках. Также этому коду поддается возможность установки границ для элемента – естественно скругленных.

Работа этого способа основывается на комплексных мерах для разных браузаров. Таким образом, для Firefox и прочих браузеров, разработанных на движке webkit, библиотека предусматривает применения специализированных свойств -moz-border-radius и -webkit-border-radius, в соответствии с каждым из типов браузера. Для скругления углов для Operа применяют тег canvas, а для старичка IE – VML.

Более подробное описание библиотеки можно изучить на ресурсе автора, думаю он лучше всех сможет рассказать про свой продукт, а скачать библиотеку можно тут.

Сильные стороны библиотеки:

К слабым сторонам метода следует отнести:

Не смотря на это не стоит списывать со счетов этот метод, так как автор проекта не собирается бросать свое детище и обязательно нас порадует модифицированной версией библиотеки.

Библиотека для скругления углов DD_roundies

Еще одна библиотека, которая реализует те же задачи похожими методами. Авторские права по этой библиотеке принадлежат Drew Diller.

Что касается принципа работы, то он практически полностью аналогичен работе rocon. Точно также реализуется скругление для продуктов на основе webkit и для Firefox. IE использует VML для осуществления скругления, а Opera – SVG. Принципиальное отличие работы этих двух библиотек заключается в том, что DD_roundies производит округление одновременно для всего контейнера, а rocon – для каждого угла отдельно. Такой способ работы приводит к ресурсоемкому процессу обеспечения «резиновых» свойств для блока.

Если Вас заинтересовала данная библиотека, то найти ее можно тут.

Какие же преимущества у этого метода?

Ну а недостатков чуть побольше и они посущественнее:

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

Библиотека ImageMagick

Особенная библиотека, которая отвечает не только за скругление, но и имеет возможность выполнять много других действий над объектами. Главная особенность работы библиотеки и принципиальное отличие от прочих методов заключается в том что, команды преобразования выполняются на стороне сервера. Другими словами, картинка нужных форм и размеров присылается непосредственно с сервера и полностью готова к использованию.

Стоит отметить, что скругленные углы в такой библиотеке представляются слегка по-другому. Скругления не имеют четкой границы и выглядят слегка размыто.

К преимуществам данного способа относят:

Далее следует указать и на отрицательные эффекты использования библиотеки ImageMagick:

Для верстальщика не обязательно требуется владеть техникой работы в библиотеке ImageMagick, однако знание о существовании такого метода может улучшить эффективность взаимодействия веб-мастера, заказчика и хозяина проекта.

Посмотреть подробности можно тут

Комплекс вендорных префиксов, CSS3 и PIE

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

Не стоит забывать про наш дорогой IE. Для отладки его работы обратимся к использованию плагина PIE. Собственно, это и есть единственное отличие от первого способа. Код с учетом «пилюли» для старичка IE выглядит так:

Как и прочие методы, этот имеет положительные и отрицательные стороны. К положительным относятся:

В плохие качества сегодня попадают:

Вывод

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

Источник