свойство 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. Так, если для угла указано одно значение, — например, 30px/20px, закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:
Свойство CSS border-radius поддерживается всеми современными версиями браузеров.
Далее в учебнике: свойство box-shadow — создаем тени для элементов.
Создаем закруглённые уголки с помощью CSS 3 / Habr
Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Кроссбраузерная совместимость.
К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).
Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.
Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.
Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.<body>
<div></div>
</body>
В CSS зададим для него высоту, ширину и цвет фона:#box {
width:590px;
background-color:#6B86A6; }
Добавляем свойство border-radius:
Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box {
-moz-border-radius: 20px;
}Теперь все четыре угла будут иметь радиус 20px:
Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:#box {
-moz-border-radius:20px 40px;
Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.#box {
-moz-border-radius:10px 20px 30px 40px;
}
Объявляем свойство border-radius для каждого угла
Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:
- moz-border-radius-topleft для верхнего левого угла;
- moz-border-radius-topright для верхнего правго угла;
- moz-border-radius-bottomright для нижнего правого угла;
- moz-border-radius-bottomleft для нижнего левого угла;
Горизонтальный и вертикальный радиус
Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box {
-moz-border-radius-topleft: 30px 15px;
}Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.
При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box {
-moz-border-radius: 30px / 15px;
}
#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}Использование свойства border-radius в Safari и Chrome.
Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:
- -webkit-border-top-left-radius для верхнего левого угла;
- -webkit-border-top-right-radius для верхнего правого угла;
- -webkit-border-bottom-right-radius для нижнего правого угла;
- -webkit-border-bottom-left-radius для нижнего левого угла;
При использовании краткой записи необходимо иметь ввиду, что её можно использовать только когда значения для всех углов равны, если значения разные, то необходимо указывать свойства для каждого угла.
#box {
-webkit-border-radius: 10px 20px 30px 40px;
}Правильный код будет выглядеть так:#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
}
Горизонтальный и вертикальный радиус в Safari и Chrome.
В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box {
-webkit-border-top-left-radius: 30px 15px;
}При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box {
-webkit-border-radius: 30px 15px;
}Примеры.
Закруглённые углы (свойство 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
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 без Фотошопа — Технический блог
1 июня 2015 / HTML & 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 по обработки изображений и показать как это просто.
Совет 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
Источник: http://blog.teamtreehouse.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьСкруглённые или остроугольные? / Habr
Скруглённые или квадратные? Вот в чём вопрос.Нужно ли менять обычные остроугольные кнопки на скруглённые? Какие из них лучше для юзабилити? Как мы вообще принимаем подобные решения?
Именно с такими вопросам вы столкнётесь, погрузившись в UX, связанный со круглёнными кнопками в приложениях. Мы уже знаем, что размер, контрастность и отбрасываемая тень сами по себе могут сделать кнопку заметной, но вот найти правильный баланс для элементов главного действия и вторичных не всегда просто. Скруглённость в этом случае может прийти на помощь.
Переменные, используемые для улучшения заметности
Скруглённые элементы легче для восприятия. Посчитать количество карточек в ряду легче, если их углы неострые.
Скруглённые элементы легче распознать, чем острые
Так происходит потому, что лучше различимая скруглённость помогает нашим глазам быстрее различать сами карточки. Напротив, карточки с острыми углами выглядят унифицировано и единообразно, что затрудняет их распознавание.
В grid layout скруглённость работает ещё лучше.
Например, в дашборде на TurboTax глаз лучше цепляется за элементы со скруглёнными углами в верхней секции в сравнении со средней секцией, где у карточек углы острые.
Дашборд Turbotax
Полностью скруглённые кнопки отлично смотрятся в интерфейсах, где адекватное количество свободного пространства. Пример очень удачного расположения таких кнопок — Spotify, где хорошо ощущается призыв к действию.
Скруглённые кнопки на Spotify
Вообще говоря, в данном конкретном примере, так как работа со Spotify всегда сводится к воспроизведению (треков, подкастов, плейлистов), главное действие определено однозначно. А полностью скруглённые кнопки воспроизведения очень хорошо отличимы от UI альбомов и плейлистов, что в свою очередь побуждает пользователя нажать на «Play».
“Play” на Spotify
В некоторых случаях скруглённость может ухудшить юзабилити, например:
1. Когда скруглённые кнопки похожи на теги
Если отличить кнопку от тега (фильтра) непросто, это введёт людей в замешательство: «Я кликаю на кнопку или на фильтр?»
Что это: кнопки или фильтры? Совсем неочевидно.
2. Скруглённые кнопки не способны показать вложенные опции
Полностью скруглённые кнопки обычно используют иконку со «стрелочками», чтобы показать наличие вложенных опций. Но область клика (или тача) для отображения опций у них лимитирована размером иконки (обычно 16×16 или 24×24 px).
Удобно ли будет просматривать опции в каждом из случаев?
Если использовать лишь слегка закруглённые кнопки, мы сможем прятать стрелочку, чтобы кнопка вела себя похоже на pop-up кнопку. Такой подход работает лучше.
Apple не рекомендует использовать скруглённые кнопки для действий (см. push buttons). Полностью скруглённые кнопки зарезервированы для «Помощи» или предоставления взаимоисключающих вариантов (см. radio buttons).
Иллюстрации из Human Interface Guidelines от Apple
3. Полностью скруглённые кнопки не подходят для стеков
Когда мы размещаем скруглённые кнопки рядами в таблицах и карточках, они смотрятся не к месту. Например, для таблицы из 10 строк мы получим столбец из 10 кнопок, каждая из которых выглядит, как кнопка для совершения главного действия.
В качестве альтернативы можно попробовать кнопки «без границ», как это сделано в новых уведомлениях macOS, или показывать кнопки только при наведении курсора. Минимизируя заметность кнопок, мы позволим пользователю сосредоточиться на главной рабочей области.
Кнопки «без границ» в стеке
Скруглённость выглядит современно. Применение полного скругления началось в мобильных интерфейсах и перекочевало в веб. Отсутствие остроты вызывает чувства простоты, оптимизма и доступности. Вероятно, именно поэтому многие системы дизайна взяли скруглённые элементы на вооружение и широко применяют для иконок, кнопок или даже изображений.
В Хроме после недавнего апдейта (прошло полгода с момента публикации оригинальной статьи — прим. перев.) адресная строка стала скруглённой, чтобы лучше выразить доступность одновременного использования для поиска. Пользователи могут увидеть часть результатов поиска прямо во время печати, ещё до перехода на страницу.
Новая строка поиска в Chrome (источник — Google blog)
Вписываясь в новую концепцию, кнопки на тулбаре стали подсвечиваться скруглёнными при наведении. Несложно найти скруглённые элементы и в других приложениях Гугла типа Calendar, Gmail и Drive.
Нет однозначного ответа что лучше — скруглённость или остроугольность. Но скруглённые элементы могут помочь побудить пользователя взаимодействовать с приложением, не отвлекаясь на второстепенный UI.
Use round shapes in Material Designs
Characteristics of rounded corners
Why rounded corners are easier on the eyes
Скругленные углы css. Как закруглить углы в CSS и HTML
). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Синтаксис CSS border-radius :
border-radius : [значение_скругления ];
Как скруглить углы в HTML через CSS
Рассмотрим примеры скругления углов через CSS. Например
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:
- Верхний левый угол (в примере это 10px)
- Верхний правый угол (в примере это 7px)
- Нижний правый угол (в примере это 0px)
- Нижний левый угол (в примере это 0px)
Например
Результат:
Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.
Задание второго радиуса нужно задавать через слэш «/» в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Результат:
ПримечаниеЗначения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
Например:
border : 1px solid #00ff00 ;
- Толщина — задается чаще всего в пикселях
- Тип линии
может принимать значения:
- solid (сплошной)
- dashed (пунктирный)
- dotted (ряд точек)
- groove (линия бороздка)
- inset (вдавленная линия)
- outset (выдавленная линия)
- Цвет можно задать либо в формате RGB, либо просто названием (см. коды и названия html цветов)
Приведем пример
Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр — цвет (#a0b).
Например
Результат:
Мы приводили всегда в качестве примеров тег
. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .Браузеры
Старые браузеры могут не поддерживать свойство border-radius
. Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div { border-radius: 10px; } | Радиус скругления для всех уголков сразу. | |
| div { border-radius: 0 10px; } | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. |  |
| div { border-radius: 20px 10px 0; } | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |  |
| div { border-radius: 20px 10px 5px 0; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |  |
В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
РадиусМеня — супплетивная форма винительного падежа от я.
Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
КнопкаРезультат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
СвечениеРезультат данного примера показан на рис. 3.
Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Эллиптические уголки Вы сами себе учительРезультат данного примера показан на рис. 4.