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

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

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

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

Пример

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

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

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

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

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

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

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

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

Свойство Описание
border Устанавливает все свойства границы в одном объявлении
border-bottom Устанавливает все свойства нижней границы в одном объявлении
border-bottom-color Устанавливает цвет нижней границы
border-bottom-style Устанавливает стиль нижней границы
border-bottom-width Устанавливает ширину нижней границы
border-color Устанавливает цвет четырех границ
border-left Устанавливает все свойства левой границы в одном объявлении
border-left-color Устанавливает цвет левой границы
border-left-style Устанавливает стиль левой границы
border-left-width Устанавливает ширину левой границы
border-radius Устанавливает все четыре свойства border-*-radius для закругленных углов
border-right Устанавливает все свойства правой границы в одном объявлении
border-right-color Устанавливает цвет правой границы
border-right-style Устанавливает стиль правой границы
border-right-width Устанавливает ширину правой границы
border-style Устанавливает стиль четырех границ
border-top Устанавливает все свойства верхней границы в одном объявлении
border-top-color Устанавливает цвет верхней границы
border-top-style Устанавливает стиль верхней границы
border-top-width Устанавливает ширину верхней границы
border-width Устанавливает ширину четырех границ
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

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

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

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

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

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

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

введите сюда описание изображения

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

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

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

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

В шапке svg для кода фильтра установлено width="0" и height="0" . Это сделано, чтобы скрыть svg и не мешать вёрстке.

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

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

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

Первая фигура это образец, ниже та же фигура — .round с закругленными уголками.

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

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

Скругление блоков на практике

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

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

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

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

  • простота использования;
  • универсальность;
  • лаконичность кода (с учетом разгрузки DOM и сохранения семантики);
  • минимизация использования внешних файлов (картинки, javascript и прочее).

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

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

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

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

  • отсутствие наличия файлов извне;
  • объем кода минимально возможен и отвечает требованиям семантики;
  • минимальное время обработки кода браузером и вывод его на экране;
  • подвергает скруглению любые блоки и элементы страницы.

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

  • после выхода в свет нового свойства браузеры не справлялись с выводом округленных углов. Ситуация стабилизировалась только спустя 2-3 года, а до этого времени кроссбраузерность была на низком уровне, даже не смотря на наличие вспомогательных вендорных префиксов –moz и –webkit.
  • браузеры семейства –webkit скругляют углы без сглаживания.

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

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

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

Применение свойства бордер радиуса

На заметку
  • свойство лучше взаимодействует с картинками, выводящимися через background;
  • для изображения, которое вставляется в скругленную рамку, необходимо прописать overflow: hidden;, дабы избежать наложения острых углов картинки на скругленную рамку;
  • при скруглении таблицы часто возникают проблемы в Internet Explower, чтобы этого избежать тег table оборачивают в div, который подвергнется скруглению без лишних проблем; и их решениях.

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

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

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

Картинки скругления

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

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

скругление картинками

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

  • простота в применении;
  • использование только 1 внешнего файла.

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

  • применение внешнего файла;
  • большой объем кода и некоторое несоответствие с семантикой;
  • очень усложнена процедура внесения правок, банальное изменение цвета фона повлечет за собой много трудностей;
  • невозможность работы при не однотонном фоне родителя.

Плагин jQuery.corner

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

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

  • код не загрязняется лишними элементами;
  • семантика кода соответствует всем требованиям;
  • минимальное количество внешних файлов;
  • простая процедура внесения правок в скругления и взаимодействующие с ними элементы.

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

  • низкий показатель кроссбраузерности при использовании фона с разными оттенками;
  • возможны прочие недостатки при использовании разноцветного фона;
  • IE6 не корректно воспринимает плагин;
  • работа плагина основывается на огромном количестве вставленных элементов в DOM, что может вызвать некоторые проблемы при загрузке анимаций на странице.

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

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

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

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

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

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

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

  • быстродействие;
  • простота использования;
  • компактный объем библиотеки;
  • учтена возможность использования «резиновых» блоков;
  • предусмотрено динамическое изменение скруглений в блоке;
  • минимальное количество внешних файлов.

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

  • недопустимо скруглять контейнер, который имеет разноцветный фон;
  • изображения не скругляет (имеется ввиду, которые выводятся через тег img);
  • библиотека новая и существует ряд мелких недостатков, которые нужно дорабатывать.

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

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

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

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

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

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

  • прост в использовании;
  • имеет возможность скруглять блоки с разноцветным фоном;
  • может определять разные радиусы скругления для определенных углов одного блока.

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

  • недостаточный уровень крссбраузерности (проблемы могут возникать в IE и Opera);
  • при скруглении блока на неоднородном фоне существует вероятность появления багов;
  • не скругляет картинки;
  • очень медленно отрабатывает в IE вследствие постоянного пересчета габаритных размеров контейнера и перерисовки фигуры.

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

Библиотека ImageMagick

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

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

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

  • не требуется использования внешних файлов;
  • высокий показатель кроссбраузерности;
  • допускается устанавливать границу для изображения, которая тоже скругляется по форме картинки.

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

  • может работать только с картинками;
  • при обработке картинки, которая располагается на разноцветном фоне, требуется использовать формат png-24, что может увеличить размер используемого изображения.

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

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

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

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

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

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

  • простота метода;
  • грамотно написанный код с точки зрения семантики и валидности;
  • нет картинок;
  • плагин будет подгружаться только при использовании IE-браузеров.

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

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

Вывод

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *