свойство border-radius — учебник CSS
В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color
и border-style
, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.
Как закруглить углы: свойство CSS3 border-radius
Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius
с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).
Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:
. borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }
Стиль, описанный выше, даст следующий результат на элементе <div>
размером 200×200 пикселей:
Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:
.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }
Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:
.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; }
Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:
border-top-left-radius
— для верхнего левого угла;border-top-right-radius
— для верхнего правого угла;border-bottom-left-radius
— для нижнего левого угла;border-bottom-right-radius
— для нижнего правого угла.
Принцип скругления углов
На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px
, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например,
, закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px
, а второе — длиной вертикальной полуоси — 20px
:
Свойство CSS border-radius поддерживается всеми современными версиями браузеров.
Далее в учебнике: свойство box-shadow — создаем тени для элементов.
border-radius | htmlbook.ru
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
Описание
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
border-radius: <радиус>{1,4} [ / <радиус>{1,4}]
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
Число значений | Результат |
---|---|
1 | Радиус указывается для всех четырех уголков. |
2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка. |
3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка. |
4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка. |
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style> .radius { background: #f0f0f0; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 15px; /* Поля вокруг текста */ margin-bottom: 10px; /* Отступ снизу */ } </style> </head> <body> <div> border-radius: 50px 0 0 50px; </div> <div> border-radius: 40px 10px; </div> <div> border-radius: 13em/3em; </div> <div> border-radius: 13em 0.5em/1em 0.5em; </div> <div> border-radius: 8px; </div> </body> </html>
Результат данного примера показан на рис. 2.
Рис. 2. Радиусы скругления в браузере Safari
Браузеры
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.
Закругленные углы и блоки с тенью
Закругленные углы и блоки с теньюЗакругленные углы и блоки с тенью
На создание этой страницы вдохновила работа Арве Берсвендсена (Arve Bersvendsen). У него есть много других интересных демонстраций CSS.
В CSS3 есть свойства для создания закругленных границ, границ, состоящих из изображений и блоков с тенями. Но немного потрудившись, вы сможете их частично смоделировать, начиная уже с версии CSS2 — причём без таблиц и дополнительной разметки.
Конечно, закругленные границы и тени гораздо легче сделать при помощи CSS3, чем в CSS2. Например, чтобы задать абзацу тонкую красную рамку с закругленными углами, в CSS3 вам достаточно всего двух строк наподобие этих:
P { border: solid thick red; border-radius: 1em }
А для того, чтобы добавить смазанную тень на половину еm ниже и правее абзаца, достаточно будет всего лишь одной линии:
P { box-shadow: black 0.5em 0.5em 0.3em }
(Вы можете посмотреть здесь и здесь, чтобы убедиться как это работает.) Однако если эти эффекты нужны в старых браузерах и вы не возражаете против сложности и отсутствия гибкости, вы можете использовать технику, описанную ниже. В крайнем случае, это будет хорошей проверкой для дефектных браузеров.…
Результат
А вот как это выглядит:
Видите бледный зеленый блок с закругленными углами и тенью на белом фоне? Если нет, значит, ваш браузер некорректно справляется с генерированием контента (или не справляется вовсе).
Исходный код HTML не содержит ничего лишнего:
<blockquote> <p>Видите бледный зеленый блок с закругленными углами и тенью на белом фоне? Если нет, значит, ваш браузер некорректно справляется с генерированием контента (или не справляется вовсе). </blockquote>
Навигация по сайту
Закруглённые углы (свойство border-radius) | CSS — Примеры
Генератор border-radius CSS
<style> .radius { border: 2px solid CornflowerBlue; border-radius: 0 ; } .radius { border: 2px solid CornflowerBlue; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } </style> <div>содержимое блока с закруглёнными углами</div>
Как сделать закругленные углы CSS
Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.
background box-shadow outline [решение] border-image [решение]
<div>содержимое блока</div>
Круглые углы у картинки
border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.
<img alt="Лиса нюхает цветок" src="http://2.bp.blogspot.com/-sy6DMWrlfv4/UlDiksWHMLI/AAAAAAAAEDQ/xodTOQapT8g/s00/x_19f2a02b.jpg" style="border-radius: 100%;">
Закруглить края у видео на YouTube
<iframe src="http://www.youtube.com/embed/fXwUPXY9eaY?rel=0" frameborder="0" allowfullscreen style="border: 20px solid #1b1b1b; border-radius: 20px; box-sizing: border-box;"></iframe>
HTML таблица с закругленными углами
Закруглить таблицу можно, но с border-collapse: separate;
1 | 2 | 3 |
---|---|---|
1.1 | 2.1 | 3.1 |
1.2 | 2.2 | 3.2 |
<table> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tr> <td>1.1</td> <td>2.1</td> <td>3.1</td> </tr> <tr> <td>1.2</td> <td>2.2</td> <td>3.2</td> </tr> </table>
border-radius у вложенных элементов
Сравните
<div><div></div></div> <div></div> <div><div></div></div>
Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы
внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px
CSS скругление углов у border-image
Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.
<div> <div> <div>содержимое блока</div> </div> </div>
Округление outline
Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).
Закругление углов в примерах
HTML овал
<style> .radius { height: 200px; border: 7px solid red; border-radius: 100%; } </style> <div>...</div>
HTML круг
Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.
<style> .radius { width: 200px; height: 200px; border: 7px solid red; border-radius: 100%; } </style> <div>...</div>
HTML цилиндр
<style> .radius { width: 200px; height: 200px; border: 7px dashed red; border-radius: 100%/20%; } </style> <div>...</div>
Закругленные три края, HTML капля
<style> .radius { width: 200px; height: 200px; border: 7px inset red; border-radius: 0% 100% 100%; } </style> <div>...</div>
HTML полукруг
<style> .radius { width: 200px; height: 200px; border: 1px dashed red; border-radius: 100% 100% 0% 0%; } </style> <div>...</div>
HTML лист
<style> .radius { width: 200px; height: 200px; border: 7px groove red; border-radius: 70% 0 / 70%; } </style> <div>...</div>
HTML яйцо
<style> .radius { width: 200px; height: 300px; border-radius: 80% / 100% 100% 60% 60%; background: #f1f1f1; } </style> <div>...</div>
Камушек HTML
<style> .radius { width: 200px; height: 200px; border-radius: 60% 80% / 100% 90% 60% 50%; background: #f1f1f1; } </style> <div>...</div>Слайды с конференции
Как закруглить углы изображения на CSS без Фотошопа — Технический блокнот
Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.
Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.
Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.
Закругление углов у блоков DIV
По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:
border-radius: 10px;
Для наглядности нарисуем два блока с прямыми и скругленными углами:
Блок с прямыми углами
Блок с закругленными углами
Закругление углов у картинок
По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh
Вот изображение без CSS обработки
А теперь с загругленными углами:
border-radius: 10px;
Чтобы стало совсем «красиво» с начала добавим окантовку…
border-radius: 10px; border: 5px #ccc solid;
а затем и тени:
border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;
Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:
border-radius: 10px; box-shadow: 0 0 10px #444;
И напоследок полное издевательство над изображением
border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;
Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.
Маленькое лирическое отступление
Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.
А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.
Как закруглить углы картинок на WordPress
Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:
<img src="/wp/wp-content/uploads/2016/01/humor/humor01.jpg">
Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.
Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:
.alignnone { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }
Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:
img { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }
Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!
Вместо заключения
Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.
Закругленные углы с помощью радиуса округления границ рамки CSS3
До появления CSS3, чтобы добавить к таким элементам веб-страницы, как формы или кнопки, закругленные углы, нужно было использовать ряд изображений и много дополнительной разметки. К счастью, теперь закругленные углы CSS позволяет создавать очень просто. В том числе это можно сделать с помощью свойства border-radius.
Вы можете использовать это свойство CSS3 для следующих браузеров:
- Chrome 6+;
- Firefox 4+;
- Safari 5 +;
- IE9 +;
- Opera 10.5+;
- Android 2.1+;
- iOS 3.1+.
Мы будем работать с классом «info-box«. Это может быть область вашей веб-страницы с контактной информацией, и вы хотите с помощью CSS закруглить углы.
Напишите HTML-код элемента, для которого вы хотите закруглить углы:
<div>Здесь будет какой-то контент</div>
Далее добавьте в таблицу стилей правило CSS:
.info-box { -webkit-border-radius: 20px; border-radius: 20px; background-color: #000000; {
Примечания:
Мы добавили как вендорную версию свойства, так и обычную. Мы также добавляем цвет фона. Чтобы радиус округления углов рамки отображался должным образом, фон элемента должен отличаться от фона области, в которой размещается элемент. Иначе нужно будет добавить стили, ширину и цвет рамки.
Перед тем, как сделать закругленные углы CSS, нужно отметить, что в приведенном примере все четыре угла рамки будут иметь один и тот же радиус (20 пикселей).
Вы также можете создавать панели с закругленными углами, которые отличаются друг от друга. Это можно сделать, добавив для свойства CSS несколько значений. С помощью сокращений CSS их можно указать в одну строку. Порядок присвоения значений: верхний левый угол, верхний правый, нижний правый, нижний левый:
.info-box { -webkit-border-radius: 20px 60px 40px 30px; border-radius: 20px 60px 40px 30px; background-color: #000000; {
Еще один эффект, который вы можете создать с помощью этого свойства, это круглые изображения. Если у вас есть изображение, которое имеет идеальную квадратную форму, то можно с помощью CSS закруглить углы картинки, и тогда рамка «обрежет» края изображения и создаст идеальный круг.
Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс «bio-pic«. Вы можете сделать это изображение круглым с помощью следующего CSS-кода:
img.bio-pic { -webkit-border-radius: 50%; border-radius: 50%; {
В этом случае не нужно задавать цвет фона или цвет границы, потому что вы добавляете эти стили к изображению эффект закругленных углов будет работать, так как изображение будет отличаться от цвета фона, на котором оно расположено.
Данная публикация является переводом статьи «Rounded Corners with CSS3 Border Radius» , подготовленная редакцией проекта.
Совет CSS: лучшее скругление углов
От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?
Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.
Четвертые части каждой окружности формируют закругленные углы элемента.
Когда объединяются толстые рамки
При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.mike { border-radius: 12px; border: 6px solid crimson; }
.mike { border-radius: 12px; border: 6px solid crimson; } |
Пока нет проблем.
Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.
.mike { border-radius: 12px; border: 14px solid crimson; }
.mike { border-radius: 12px; border: 14px solid crimson; } |
Рамка становится шире, а углы изображения – квадратными.
Почему так происходит?
Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.
Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЧтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.
.mike { border-radius: 26px; border: 14px solid crimson; }
.mike { border-radius: 26px; border: 14px solid crimson; } |
При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.
Метод Box-shadow
При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.
Расширенный радиус устанавливает растянутый интервал тени блока. Если установить офсеты и размытие на 0, определенное значение расширения сформирует вокруг элемента четкую рамку.
.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }
.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; } |
Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.
Применение переменных Sass
Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.
$border-width: 14px; $radius: $border-width*1.9; .mike { border: $border-width solid crimson; border-radius: $radius; }
$border-width: 14px; $radius: $border-width*1.9;
.mike { border: $border-width solid crimson; border-radius: $radius; } |
Заключение
Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.
Автор: Guil Hernandez
Источник: //blog.teamtreehouse.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотретьизображений границы CSS
Изображения границ CSS
С помощью свойства CSS border-image
вы можете установить изображение, которое будет использоваться в качестве границы вокруг элемента.
CSS border-image Свойство
Свойство CSS border-image
позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.
Имущество состоит из трех частей:
- Изображение для использования в качестве границы
- Где нарезать изображение
- Определите, должны ли средние части повторяться или растягиваться
Мы будем использовать следующее изображение (названное «border.png «):
Свойство border-image
берет изображение и разбивает его на девять частей,
как доска для крестиков-ноликов. Затем он помещает углы в углы, а
средние части повторяются или растягиваются по вашему усмотрению.
Примечание: Чтобы border-image
работал, элемент также нуждается в бордюр
набор свойств!
Здесь средние части изображения повторяются для создания границы:
Изображение как бордюр!
Вот код:
Пример
#borderimg
{
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
border-image: url (border.png)
30 тур;
}
Здесь средние части изображения растягиваются для создания границы:
Изображение как бордюр!
Вот код:
Пример
#borderimg
{
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
изображение границы: url (border.png)
30 стрейч;
}
Совет: Свойство border-image
на самом деле является сокращенным свойством для border-image-source
, border-image-slice
, ширина-границы-изображения
, граница-изображение-исход
и border-image-repeat
свойств.
CSS border-image — разные значения фрагментов
Различные значения среза полностью меняют внешний вид границы:
Пример 1:
border-image: url (border.png) 50 раунд;
Пример 2:
border-image: url (border.png) 20% круглое;
Пример 3:
border-image: url (border.png) 30% округление;
Вот код:
Пример
# borderimg1 {граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
border-image: url (border.png) 50 раунд;
}
# borderimg2 {
граница: сплошная прозрачная 10 пикселей;
отступ: 15 пикселей;
граница-изображение: url (border.png) 20% округление;
}
# borderimg3 {
граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
изображение границы: url (border.png)
30% круглый;
}
Проверьте себя упражнениями!
Свойства изображения границы CSS
border-radius — CSS: Каскадные таблицы стилей
Свойство CSS border-radius
скругляет углы внешней границы элемента.Вы можете установить один радиус для создания круглых углов или два радиуса для создания эллиптических углов.
Радиус применяется ко всему фону
, даже если элемент не имеет границы; точное положение отсечения определяется свойством background-clip
.
Свойство border-radius
не применяется к элементам таблицы, когда border-collapse
равно collapse
.
Примечание: Как и любое сокращенное свойство, отдельные вложенные свойства не могут наследоваться, например, в border-radius: 0 0 наследуется наследование
, что частично переопределяет существующие определения.Вместо этого должны использоваться отдельные свойства от руки.
Это свойство является сокращением для следующих свойств CSS:
радиус границы: 10 пикселей;
радиус границы: 10 пикселей 5%;
радиус границы: 2px 4px 2px;
радиус границы: 1px 0 3px 4px;
радиус границы: 10 пикселей / 20 пикселей;
радиус границы: 10 пикселей 5% / 20 пикселей 30 пикселей;
радиус границы: 10px 5px 2em / 20px 25px 30%;
радиус границы: 10px 5% / 20px 25em 30px 35em;
граница-радиус: наследовать;
радиус границы: начальный;
граница-радиус: вернуться;
граница-радиус: не задано;
Свойство border-radius
указано как:
- одно, два, три или четыре
<длина>
или<процент>
значений.Используется для установки единого радиуса для углов. - , за которым необязательно следует «/» и одно, два, три или четыре значения
<длина>
или<процент>
. Это используется для установки дополнительного радиуса, чтобы вы могли иметь эллиптические углы.
Значения
-
<длина>
Обозначает размер радиуса окружности или большой и малой полуосей эллипса с использованием значений длины. Отрицательные значения недопустимы.
-
<процент>
Обозначает размер радиуса круга или большой и малой полуосей эллипса в процентах. Проценты по горизонтальной оси относятся к ширине поля; проценты по вертикальной оси относятся к высоте прямоугольника. Отрицательные значения недопустимы.
Например:
border-radius: 1em / 5em;
граница-верх-левый-радиус: 1em 5em;
граница-верх-правый-радиус: 1em 5em;
граница-нижний-правый-радиус: 1em 5em;
граница-нижний-левый-радиус: 1em 5em;
радиус границы: 4px 3px 6px / 2px 4px;
граница-верх-левый-радиус: 4px 2px;
граница-верх-правый-радиус: 3px 4px;
граница-нижний-правый-радиус: 6px 2px;
граница-нижний-левый-радиус: 3px 4px;
граница: сплошная 10 пикселей;
радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
окантовка: бороздка 1em красная;
радиус границы: 2em;
фон: золото;
бордюр: хребет золото;
радиус границы: 13em / 3em;
граница: нет;
радиус границы: 40 пикселей 10 пикселей;
фон: золото;
граница: нет;
радиус границы: 50%;
фон: бурливуд;
граница: пунктирная;
ширина границы: 10 пикселей 4 пикселя;
радиус границы: 10 пикселей 40 пикселей;
граница: пунктирная;
ширина границы: 2px 4px;
радиус границы: 40 пикселей;
pre {
маржа: 20 пикселей;
отступ: 20 пикселей;
ширина: 80%;
высота: 80 пикселей;
}
pre # example-1 {
граница: сплошная 10 пикселей;
радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
}
pre # example-2 {
окантовка: бороздка 1em красная;
радиус границы: 2em;
}
pre # example-3 {
фон: золото;
кайма: хребет золото;
радиус границы: 13em / 3em;
}
pre # example-4 {
граница: нет;
радиус границы: 40 пикселей 10 пикселей;
фон: золото;
}
pre # example-5 {
граница: нет;
радиус границы: 50%;
фон: бурливуд;
}
pre # example-6 {
граница: пунктирная;
ширина границы: 10 пикселей 4 пикселя;
радиус границы: 10 пикселей 40 пикселей;
}
pre # example-7 {
граница: пунктирная;
ширина границы: 2px 4px;
радиус границы: 40 пикселей;
}
Живые образцы
Таблицы BCD загружаются только в браузере
Закругленные углы | HTML Собака
Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на каждый угол, накладываемых на несколько вложенных элементов div
.Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.
Радиус границы?
Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы. Свойство border-radius
можно использовать для добавления угла к каждому углу блока.
#maryn {
фон: #fff;
ширина: 100 пикселей;
высота: 100 пикселей;
радиус границы: 20 пикселей;
}
Вот и все.Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).
Углы вырезаются вокруг соответствующих четвертей круга (или эллипса) с заданным радиусом.Конечно, если вы, , хотите границу…
#ok_a_border_then {
граница: 5px solid # 8b2;
ширина: 100 пикселей;
высота: 100 пикселей;
радиус границы: 5 пикселей;
}
Woop.
Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.
Несколько значений
border-top-left-radius
, border-top-right-radius
, border-bottom-right-radius
и border-bottom-left-radius
также можно использовать для нацеливания на определенные углы.
Когда-либо менее ужасно многословный, вы также можете определить все угловые радиусы (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:
#monroe {
фон: #fff;
ширина: 100 пикселей;
высота: 100 пикселей;
border-radius: 6px 12px 18px 24px;
}
Граничный радиус с несколькими значениями.Фигуристая.
Используя два значения вместо четырех, вы нацеливаетесь на верхний левый и нижний правый угол первой длины (или в процентах), а верхний правый + нижний левый — на второй. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.
Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.
Internet Explorer версии 8 и ниже не поддерживает border-radius
. Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.
Вы также можете наткнуться на похожие проприетарные свойства, такие как -webkit-border-radius
и -moz-border-radius
, которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.
Эллипсы
Круги для вас слишком квадратные? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».
#nanoo {
фон: #fff;
ширина: 100 пикселей;
высота: 150 пикселей;
радиус границы: 50 пикселей / 100 пикселей;
граница-нижний-левый-радиус: 50 пикселей;
граница-нижний-правый-радиус: 50 пикселей;
}
Наноо.CSS Закругленные углы: пошаговое руководство
При разработке веб-страницы вы можете захотеть, чтобы у элемента были закругленные углы. Например, если вы добавляете фотографию владельца компании на веб-страницу, вы можете захотеть, чтобы у изображения были закругленные углы, чтобы сделать его более эстетичным.
Найдите свой учебный лагерь Match
- Карьера Карма подойдет вам с лучшими техническими учебными курсами
- Получите эксклюзивные стипендии и подготовительные курсы
Вот тут и пригодится свойство CSS border-radius.Вы можете использовать свойство border-radius для добавления закругленных углов к любому элементу в CSS.
В этом руководстве на нескольких примерах обсуждается, как использовать свойство border-radius для добавления закругленных углов к элементу в CSS.
Радиус границы CSS
Границы — это линии, окружающие внешний край веб-элемента.
Найдите свой учебный лагерь Match
- Карьера Карма подойдет вам с лучшими техническими учебными курсами
- Получите эксклюзивные стипендии и подготовительные курсы
В CSS свойство границы используется для указания того, как граница должна отображаться на веб-странице.Если вам интересно узнать больше о том, как создавать границы в CSS, прочтите наше руководство по границам CSS.
CSS Установить отдельные закругленные углы
Свойство border-radius является сокращением для четырех подсвойств, используемых для установки радиуса границы каждого угла. Эти подсвойства:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
Эти свойства используются для установки границы вокруг определенного угол веб-элемента.Каждый элемент принимает значение длины в пикселях, em, другое измерение длины или процентное значение (%).
Давайте рассмотрим пример, чтобы проиллюстрировать, как работают эти свойства.
Нам было поручено разработать коробку с закругленными верхними левыми и нижними правыми углами. Наш блок должен иметь сплошную светло-синюю рамку размером 3 пикселя. Верхний левый угол должен быть закруглен на 20 пикселей, а нижний правый угол — на 10 пикселей. Мы могли бы использовать следующий код для создания этого ящика:
Индекс.htmlЭто коробка.
styles.css .коробка { граница: 3px сплошной светло-голубой; граница-верх-левый-радиус: 20 пикселей; граница-нижний-правый-радиус: 10 пикселей; }
Наш код возвращает:
В нашем HTML-коде мы создали поле с помощью тега
, в котором текст Это поле
. хранится. Нашему тегу
box
, что означает, что стили CSS, которые мы применяем к классу box
, будут применены к тегу В нашем файле CSS мы определили, что любой элемент с классом box
должен иметь:
- Сплошная голубая рамка шириной 3 пикселя.
- Верхний левый угол, округленный на 20 пикселей.
- Нижний правый угол, округленный на 10 пикселей.
Если вы посмотрите на изображение выше, вы увидите, что наши верхний левый и нижний правый углы скруглены. Левый верхний угол был закруглен на 20 пикселей, а правый нижний угол — на 10 пикселей.
Сокращение радиуса границы CSS
Свойство border-radius является сокращением для четырех подсвойств, которые мы обсуждали ранее.
Используя свойство border-radius, мы можем определить закругленные углы для веб-элемента, используя одну строку кода, вместо того, чтобы определять каждый угол по отдельности с использованием отдельного свойства.
Синтаксис свойства border-radius зависит от того, сколько значений вы укажете. Давайте рассмотрим пример каждого из возможных способов использования свойства border-radius для добавления закругленных углов к элементу.
Одно значение
Если вы хотите применить одинаковый радиус границы к каждому углу элемента, вам нужно указать только одно значение при использовании свойства border-radius.
Предположим, вы хотите создать рамку с радиусом границы 20 пикселей по всем углам. Вы можете сделать это с помощью этого кода:
.box { радиус границы: 20 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
В этом примере мы создали поле высотой 200 пикселей и шириной 200 пикселей.Наш блок имеет сплошную светло-синюю рамку размером 3 пикселя. Мы также использовали свойство border-radius, чтобы добавить эффект округления на 20 пикселей к каждому углу в нашем блоке.
Два значения
Если вы создаете прямоугольник, который должен иметь одинаковое скругление для верхнего левого и нижнего правого углов и другой набор скруглений для верхнего правого и нижнего левого углов, вы можете указать два значения с помощью свойства border-radius.
Порядок, в котором применяются указанные вами значения округления:
- Первое значение — это величина, на которую вы хотите, чтобы верхний левый и нижний правый углы были скруглены.
- Второе значение — это величина, на которую вы хотите, чтобы верхний правый и нижний левый углы были округлены.
Предположим, вы хотите, чтобы верхний левый и нижний правый углы прямоугольника были закруглены на 20 пикселей, а нижний левый и верхний правый углы — на 10 пикселей. Вы можете создать этот ящик, используя следующий код:
.box { радиус границы: 20 пикселей 10 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
В нашем примере мы указали два значения с помощью свойства border-radius.Первое значение используется для установки закругления края верхнего левого и нижнего правого углов на 20 пикселей. Второе значение используется для установки закругления углов для левого нижнего и правого верхнего углов на 10 пикселей.
Три значения
Если вы хотите назначить прямоугольник с закругленными углами, где верхний левый угол имеет собственное закругление, верхний правый и нижний левый углы имеют собственное закругление, а нижний правый угол имеет собственное закругление, вы можете указать три значения с рамкой -радиус свойство.
Порядок, в котором указанные вами три значения применяются к блоку, следующий:
- Первое значение — это округление левого верхнего угла.
- Второе значение — это округление для верхнего правого и нижнего левого углов.
- Третье значение — это округление правого нижнего угла.
Предположим, мы создаем прямоугольник, который должен иметь следующие округления:
- Верхний левый угол должен быть скруглен на 30 пикселей.
- Верхний правый и нижний левый углы должны быть скруглены на 20 пикселей.
- Нижний правый угол должен быть скруглен на 10 пикселей.
В приведенном ниже примере мы создаем прямоугольник, который использует эти скругления углов. Мы также применяем светло-синюю рамку вокруг нашего блока и устанавливаем его размер 200 пикселей в ширину и 200 пикселей в длину. Вот код, который мы могли бы использовать для создания нашего бокса:
.box { радиус границы: 30 пикселей 20 пикселей 10 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
Верхний правый и нижний левый углы имеют одинаковое закругление.Верхний левый угол имеет собственное закругление, а нижний правый угол также имеет собственное закругление.
Четыре значения
Допустим, вы создаете прямоугольник, углы которого должны быть скруглены с использованием четырех разных значений. Вы можете скруглить углы рамки, указав четыре значения с помощью свойства border-radius. Указанные вами значения будут интерпретироваться в следующем порядке:
- Первое значение применяется к верхнему левому углу.
- Второе значение относится к правому верхнему углу.
- Третье значение применяется к нижнему правому углу.
- Четвертое значение применяется к нижнему левому углу.
Предположим, мы хотим создать прямоугольник с закруглением на 5 пикселей в верхнем левом углу, закруглением на 10 пикселей в правом верхнем углу, закруглением на 15 пикселей в правом нижнем углу и закруглением на 20 пикселей в нижнем левом углу. Наше поле должно быть 200 пикселей в ширину на 200 пикселей в длину и иметь сплошную голубую границу шириной 3 пикселя.
Мы могли бы создать этот ящик, используя следующий код:
.коробка { радиус границы: 5 пикселей 10 пикселей 15 пикселей 20 пикселей; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
На изображении выше вы можете видеть, что каждый угол имеет собственное значение округления, основанное на значениях, которые мы указали в нашем коде.
Эллиптические углы
В наших примерах выше мы использовали радиус границы для создания закругленных углов. Мы также можем использовать свойство border-radius для создания эллиптических границ.
Мы можем создать эллиптические углы, добавив косую черту между двумя значениями углов элемента.Вот синтаксис для создания эллиптического угла:
border-radius: горизонтальный радиус / вертикальный радиус;
Предположим, мы хотим создать 25% -ный эллиптический угол вокруг горизонтальных углов коробки и 50% -ный эллиптический угол вокруг вертикальных углов коробки. Наше поле должно быть 200 пикселей в ширину и 200 пикселей в длину и иметь светло-синюю рамку. Мы могли бы сделать это с помощью этого кода:
.box { радиус границы: 25% / 30%; граница: 3px сплошной светло-голубой; высота: 200 пикселей; ширина: 200 пикселей; }
Наш код возвращает:
Как видите, мы создали форму с эллиптическими закругленными углами.
Заключение
Свойство border-radius используется для добавления закругленных углов к элементу в CSS. Свойство border-radius является сокращением для четырех подсвойств, используемых для добавления закругленных углов к каждому углу веб-элемента.
В этом руководстве, сопровождаемом несколькими примерами, обсуждается, как использовать свойство border-radius и его четыре подсвойства для создания закругленных углов в CSS. Теперь вы готовы начать использовать свойство border-radius для создания закругленных углов, как эксперт.
Как создавать блоки с закругленными углами в CSS
До поддержки браузером CSS3 создание блоков с закругленными углами требовало творческого использования
фоновые изображения, границы и расположение. К счастью, эти дни прошли. Сегодня браузеры поддерживают
CSS3 и его свойства border-radius
. Свойства border-radius
делают
Закруглить углы на коробке несложно.
- Начните с HTML-страницы, содержащей два поля.
- Свойства
border-radius
работают путем изгиба угла по окружности. со смещением центра от угла коробки на расстояние, на которое вы указать.Чтобы создать простой прямоугольник с закругленными углами, добавьте свойствоborder-radius
. наbox1
.# box1 { фон: # c00; радиус границы: 25 пикселей; }
border-radius
— это сокращенное свойство, которое устанавливает радиус для всех четырех углы поля равны одному и тому же значению, если дано только одно значение. - Чтобы изменить округлость углов на разные значения, вы можете установить более одного значения с помощью
значения, разделенные пробелами.Первое значение представляет верхний левый угол, второе значение представляет
верхний правый угол, третье значение представляет нижний правый угол, а четвертое значение представляет
нижний левый угол. Добавьте следующий
border-radius
кbox2
.#box 2 { фон: # ff0; радиус границы: 10 пикселей 140 пикселей 30 пикселей 140 пикселей; }
- Откройте HTML-страницу в браузере. Две коробки должны выглядеть так:
Закругленные угловые рамки
Пример 1
Пример 2
Если вы откроете эту страницу в браузере, она будет выглядеть так:Закругленные углы на изображениях | IANR Media
Свойство CSS border-radius добавляет закругленные углы к изображениям.Вы можете скруглить все углы изображения или просто выбрать углы, изменить радиус в разных углах или отобразить изображение в форме овала или круга.1. Добавьте изображение на свою страницу.
Нужна помощь при вставке изображения?
2. Добавьте класс к вашему изображению
Таким образом, ваши стили будут нацелены только на элементы с этим классом.
Примечание: Если вы используете сетку на своей странице и хотите, чтобы изображение всегда занимало всю ширину столбца, в котором оно находится, также добавьте класс dcf-w-100%
3.Уложите углы.
CSS-свойство border-radius
— это то, что добавляет закругленные углы.
img. Round-corners {
радиус границы: 30 пикселей;
}
Вот как это выглядит:
Вы можете экспериментировать с разными значениями, чтобы получить то, что вам нравится.
border-radius: 5px;
радиус границы: 50 пикселей;
border-radius: 75px;
Если вы хотите, чтобы это был круг, добавьте border-radius: 50%;
.Это сделает круг только в том случае, если вы начинаете с квадратного изображения.
border-radius: 50%;
border-radius: 50%;
Если вы хотите, чтобы разные углы изображения закруглялись по-разному, можно настроить их индивидуальный таргетинг. В предыдущих примерах, когда вы объявляли одно значение для border-radius, оно применялось ко всем углам. Но вы можете перечислить четыре разных значения для разных углов.
1234 радиус границы: 10 пикселей 20 пикселей 30 пикселей 40 пикселей;
Порядок чисел идет по часовой стрелке, начиная с верхнего левого угла: верхний левый, верхний правый, нижний правый, нижний левый.
Вот несколько примеров изображений со значениями радиуса границы, которые различаются для разных углов:
радиус границы: 120 пикселей 20 пикселей 120 пикселей 20 пикселей;
border-radius: 40px 40px 0 0;
border-radius: 0 50% 50% 50%;
4. Когда углы будут выглядеть так, как вы хотите, добавьте свои стили в CSS
вашего сайта.Внутри UNLcms перейдите в раздел «Внешний вид» своего сайта и нажмите «Настройки».
Вставьте свои стили в поле CSS вверху, затем прокрутите страницу вниз и нажмите «Сохранить конфигурацию».
Готовый продукт
img. Round-corners {
радиус границы: 30 пикселей;
}
Как создать кнопку с закругленными углами с помощью CSS
В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на это на примере.
Предположим, у вас есть следующая разметка.
Чтобы сделать div видимым, мы установим его ширину и высоту, а также зададим ему красный цвет фона.
.red_div {
цвет фона: красный;
ширина: 200 пикселей;
высота: 100 пикселей;
}
Ниже приводится результат вышеуказанного.
Чтобы сделать границы блока закругленными, вы можете добавить следующий стиль:
Вышеуказанное устанавливает радиус 15 пикселей в верхнем левом, верхнем правом, нижнем левом и нижнем правом углах элемента. Чем выше значение радиуса, тем более скругленным становится край.
Ниже вы можете увидеть результат указанной выше разметки.
Свойство border-radius
можно записать несколькими способами.
Указание одного значения для свойства установит для всех четырех краев элемента радиус этого значения.
радиус границы: 15 пикселей 15 пикселей;
С двумя значениями первое будет применяться к верхнему левому и нижнему правому углу, а второе — к верхнему правому и нижнему левому углам
радиус границы: 15px 15px 15px;
При трех значениях первое будет использоваться для верхнего левого угла, второе значение для верхнего правого и нижнего левого углов, а третье значение будет применено к нижнему правому углу.
радиус границы: 15 пикселей 15 пикселей 15 пикселей 15 пикселей;
Вышеуказанное явно устанавливает значение для каждого края. Вышеупомянутое является сокращением для приведенного ниже CSS, который также явно дает значение для каждого края.
border-top-left-radius: 15 пикселей;
граница-верх-правый-радиус: 15 пикселей;
граница-нижний-правый-радиус: 15 пикселей;
граница-нижний-левый-радиус: 15 пикселей;
В рассмотренном нами примере мы установили одинаковое значение для всех краев. Вы, конечно, можете установить разные значения для каждого ребра, если хотите.
Добавление закругленных углов к кнопкам
border-radius можно использовать и для других элементов. Ниже мы видим, что он используется для добавления закругленных углов к кнопке.
кнопка {
ширина: 200 пикселей;
высота: 100 пикселей;
радиус границы: 20 пикселей;
}
Кнопка будет выглядеть так:
Вот еще несколько примеров готовых кнопок
.