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
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
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.
Свойство border-radius — скругленные уголки
Свойство border-radius создает скругленные уголки для границы и фона. Значением свойства служат любые единицы для размеров. Значение по умолчанию: 0. Является сокращением для свойств border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.
Синтаксис
селектор {
border-radius: значение;
}
Количество значений
Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:
| Количество | Описание |
|---|---|
| 1 | Для всех углов одновременно. |
| 2 | Первое значение задает скругление для верхнего правого и нижнего левого углов, второе — для верхнего левого и нижнего правого. |
| 3 | Первое значение задает скругление для верхнего левого угла, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого угла. |
| 4 | Первое значение задает скругление для верхнего левого угла, второе — для верхнего правого, третье — для нижнего правого угла, а четвертое — для нижнего левого угла. |
Эллиптическое скругление
Два значения через слеш устанавливают эллиптическое скругление. Значение перед слешем указывает горизонтальное скругление, а значения после слеша — вертикальное:
селектор {
border-style: горизонтальное / вертикальное;
}
Если задаются скругления для нескольких углов, то до слеша перечисляются все горизонтальные скругления, а после него — все вертикальные.
Пример
Установим скругление 10px для всех углов:
<div></div> #elem {
border-radius: 10px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Пример
Посмотрим, как выглядит скругления для границы в виде точек:
<div></div> #elem {
border-radius: 10px;
border: 1px dotted black;
width: 300px;
height: 100px;
}
:
Пример
Установим скругление в 10px для углов одной диагонали, и скругления в 40px — для углов второй диагонали:
<div></div> #elem {
border-radius: 10px 40px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Пример
Установим скругление в 10px для верхнего левого угла, скругление в 30px для нижнего правого угла, и скругления в 50px — для углов второй диагонали:
<div></div> #elem {
border-radius: 10px 50px 30px;
border: 1px solid black;
width: 300px;
height: 100px;
}
:
Пример
Установим различные скругления для каждого из углов:
<div></div>
#elem {
border-radius: 10px 30px 50px 70px;
border: 1px solid black;
width: 300px;
height: 100px;
}:
Пример
Давайте сделаем эллиптическое скругление, установив 20px для горизонтальной части скругления, а 40px — для вертикальной:
<div></div> #elem {
border: 1px solid black;
border-radius: 20px / 40px;
width: 300px;
height: 100px;
}
:
Пример
А сейчас установим разное эллиптическое скругление для всех углов по отдельности:
<div></div> #elem {
border: 1px solid black;
border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
width: 300px;
height: 100px;
}
:
Пример
Если поставить для квадратного блока скругления, равное половине стороны квадрата, то получится круг: <div></div> #elem {
border-radius: 100px;
border: 1px solid black;
width: 200px;
height: 200px;
}
:
Пример
Если поставить скругление, большее чем сторона квадрата, то все равно получится круг:
<div></div> #elem {
border-radius: 200px;
border: 1px solid black;
width: 200px;
height: 200px;
}
:
Пример
Круг можно также получить, если установить border-radius в 50% (преимущество в том, что при изменении размеров квадрата не придется менять скругление):
<div></div>
:
Пример
Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:
<div></div> #elem {
border-radius: 10%;
border: 1px solid black;
width: 400px;
height: 200px;
}
:
Пример
Установим значение border-radius в 50% для прямоугольника — получится эллипс:
<div></div> #elem {
border-radius: 50%;
border: 1px solid black;
width: 400px;
height: 200px;
}
:
Пример
Свойство border-radius скругляет не только уголки не границы, но и фона:
<div></div> #elem {
border-radius: 20px;
width: 300px;
height: 100px;
background-color: #e4f1ed;
}
:
Смотрите также
- свойство border,
которое является свойством-сокращением для границы
border-radius | CSS | WebReference
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, за исключением таблиц с border-collapse: collapse |
| Анимируется | Да |
Синтаксис ?
border-radius: <радиус>{1,4} [ / <радиус>{1,4}]Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через косую черту (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчёт ведётся относительно ширины блока.
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех четырёх уголков. |
| 2 | Первое значение задаёт радиус верхнего левого и нижнего правого уголков, второе значение — верхнего правого и нижнего левого уголков. |
| 3 | Первое значение устанавливает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого уголков, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголков. |
В случае задания двух параметров через косую черту, то первый параметр задаёт радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скруглённым уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!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. Радиусы скругления
Объектная модель
Объект.style.borderRadius
Примечание
Chrome до версии 4.0, Safari до версии 5.0 и Android до версии 2.1 используют свойство -webkit-border-radius.
Firefox до версии 4.0 использует свойство -moz-border-radius.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры ?
| Базовый синтаксис | 9 | 12 | 1 | 4 | 10.5 | 3 | 5 | 1 | 4 |
| Проценты | 9 | 12 | 4 | 10.5 | 5 | 4 | |||
| Эллиптические уголки | 9 | 12 | 1 | 10.5 | 3 | 3.5 | |||
| Базовый синтаксис | 1 | 2.1 | 1 | 4 | 10.5 | 3 | 5 |
| Проценты | 2.1 | 4 | 10.5 | 5 | |||
| Эллиптические уголки | 2.1 | 3.5 | 10.5 | 3 | |||
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
border-radius | CSS
Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius.
Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/», с одним — четырьмя значениями с каждой стороны от косой черты.
- Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?; // '?' указывать данное значение необязательно
- Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
- Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
- Если задано два значения CSS table border radius, первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
- Если задано одно значение, то оно задает одинаковые радиусы четырех углов.
Например:
border-radius: 1em 3em 2em;
эквивалентно:
border-top-left-radius: 1em; border-top-right-radius: 3em; border-bottom-right-radius: 2em; border-bottom-left-radius: 3em;
В каждом из перечисленных выше случаев, когда не используется косая черта, четыре угла элемента будут закруглены, а их кривизна будет идеальным кругом:
Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.
- Если косая черта указана, то свойство может принимать до восьми значений — от одного до четырех значений с каждой стороны от косой черты.
border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
Значения, указанные перед косой чертой, задают горизонтальный радиус углов. Значения, указанные после косой черты, задают вертикальный радиус соответствующих углов.
Например:
border-radius: 2em 1em 4em / 0.5em 3em;
эквивалентно:
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
В этом случае применения border radius CSS углы элемента будут закруглены, и их кривизна будет эллиптической:
Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.
Если элемент использует фоновый цвет или изображение, фон также будет обрезаться указанным радиусом границы:
Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.
Но иногда цвет фона элемента может «просачиваться» за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box.
.element {
border-radius: 30px;
background-clip: padding-box;
}Если у элемента есть границы изображения, то они не подрезается кривой закругленных углов.
Содержимое элемента может выходить за его границы в углах, которые были закруглены, если для элемента не установлено значение отступа, достаточное, чтобы сместить содержимое внутрь:
Содержимое элемента может выходить за закругленную границу, если для элемента не заданы отступы.
В этом примере moz border radius CSS добавлены отступы, чтобы содержимое не выходило за закругленные углы границы. Обратите внимание, что сама граница не отображается, но фон все равно будет иметь закругленные углы.
.element {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
}Кроме этого область вне кривой границы не принимает pointer events, связанные с данным элементом.
Также кривые углов не должны пересекаться: когда сумма радиусов любых двух соседних границ превышает размер блока, браузеры должны пропорционально уменьшить используемые значения всех радиусов границ, чтобы ни один из них не перекрывался.
Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:
Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.
Если высота и ширина элемента не равны, мы получим эллиптическую форму:
Элемент с радиусом границы 50%, высота и ширина которого не равны.
Синтаксис:
border-radius: [<длина> | <проценты>] {1,4} [/ [<длина> | <проценты>] {1,4}]?Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.
Применяется: ко всем элементам. Но браузеры не обязательно должны применять его к элементам table и inline-table, когда для свойства border-collapse задано значение collapse. На данный момент поведение внутренних элементов таблицы не определено.
Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc(). Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc().
Неофициальный синтаксис webkit border radius CSS:
border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;
или так:
border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?
В обоих случаях вопросительный знак (?) означает, что значение является необязательным. Если значение опущено, браузер определяет его, как описано выше.
Каждый радиус может задаваться процентами или значением длины. Процентное соотношение для горизонтального радиуса относится к ширине блока, тогда как процентное соотношение для вертикального радиуса относится к высоте блока. Отрицательные значения не допускаются.
<percentage>
<length>
Примеры
border-radius: 50%; border-radius: 30px 20px 40px; border-radius: 1em 2em; border-radius: 3em / 2em 4em; border-radius: 1em 2em 1em 3em / 2em 3em;
Демо-версия
Свойство CSS3 Border-radius (закругленные углы)
Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS, а также полных свойств (например, `border-top-left-radius`).
Поддерживается со следующих версий:
Стационарные
| Chrome | Firefox | IE | Opera | Safari |
| 4 * | 2 * | 9 | 10 | 3.1 * |
Мобильные
| iOS Safari | Android | Opera Mobile | Android Chrome | Android Firefox |
| 3.2 * | 2.1 * | 11 | 56 | 51 |
* требуется указание префикса
Данная публикация представляет собой перевод статьи «border-radius» , подготовленной дружной командой проекта Интернет-технологии.ру
интересные возможности border-radius / RUVDS.com corporate blog / Habr
Что можно сделать с помощью CSS-свойстваborder-radius? Автор материала, перевод которого мы публикуем, говорит, что больше, чем кажется на первый взгляд. В частности, речь идёт о том, что углы элементов, скруглённые с помощью этого свойства, могут иметь весьма интересную форму.
Предлагаем поговорить о тонкостях использования border-radius.
Старые свойства и современный веб-дизайн
В этом году, на Frontend Conference Zurich, Рэйчел Эндрю сделала доклад о возможностях технологии CSS Grid. В конце выступления она сказала кое-что о старых CSS-свойствах и её слова меня зацепили. А именно звучало это так: «Изображение сделано круглым исключительно с использованием хорошо поддерживаемого свойства
border-radius. Не забывайте о том, что старый CSS всё ещё существует и всё ещё может приносить пользу. Вам не обязательно всегда пользоваться чем-то совершенно новым для создания каких-либо эффектов».Через некоторое время после этого выступления мне в голову пришла мысль о том, что круг— это лишь малая часть того, что можно сделать с помощью border-radius. Увлечённый этой идеей, я решил как следует разобраться с этим свойством.
Освоение border-radius
▍Единственное значение
Начнём с основ. Надеюсь, вы на этом примере не заскучаете. Вы, возможно, знакомы с CSS, да и со свойством
border-radius — тоже. Оно существует уже довольно давно, и пользуются им, в основном, указывая единственное значение. Выглядит это так: border-radius: 1em. Возможно, это было одной из самых обсуждаемых возможностей CSS3 в 2010-м, когда лучшим другом дизайнера был сайт css3please.com.При использовании единственного значения для border-radius углы элемента скругляются в соответствии с этим значением.
Скругление всех углов квадрата в соответствии с единственным значением border-radius
Как видно из вышеприведённого примера, задавать фиксированные значения можно не только указывая после чисел некие единицы измерения, вроде px, rem или em, но и знак процента. Обычно это используется для создания окружностей на основе квадратов, когда border-radius устанавливают в 50%. Процентное значение основано на ширине и высоте элемента. Поэтому, когда его применяют к прямоугольникам, получившиеся углы симметричными не будут. Вот пример, демонстрирующий разницу между свойствами border-radius: 110px и border-radius: 30%, применёнными к прямоугольнику.
Скругление углов прямоугольника
Обратите внимание на то, что углы правого прямоугольника несимметричны и запомните об этом. Нам это пригодится немного позже.
▍Четыре отдельных значения
При использовании более чем одного значения
border-radius, вы настраиваете параметры для каждого угла, начиная с верхнего левого и продвигаясь по часовой стрелке. Тут, опять же, можно использовать процентные значения. Их, кроме того, можно смешивать с фиксированными значениями.Настройка параметров для четырёх углов элемента
▍Восемь значений, разделённых косой чертой
Думаю, многие из вас уже попробовали всё, о чём мы говорили выше. Теперь настало время для по-настоящему интересных экспериментов. Что произойдёт, если значения разделить с помощью косой черты и указать до восьми таких значений? Для начала взглянем на спецификацию. Она говорит нам о том, что если значения заданы до и после косой черты, тогда значения до косой черты задают горизонтальный радиус, а значения после — вертикальный. Если косой черты нет, то оба радиуса будут одинаковыми.
Итак, значения до косой черты ответственны за горизонтальные расстояния, а значения после косой черты — за вертикальные. Всё это хорошо, но тут возникает закономерный вопрос: «А о чём вообще идёт речь?». Помните процентные значения скругления углов, задаваемые для прямоугольных фигур? Там были применены разные абсолютные значения для вертикальных и горизонтальных расстояний и присутствовали асимметрично скруглённые углы. Именно такого эффекта можно добиться, используя косую черту при настройке border-radius.
Давайте сравним эффекты, которые дают следующие настройки: border-radius: 4em 8em и border-radius: 4em / 8em. Результаты получатся очень разными.
Симметричные углы левого элемента представляют собой четверть окружности, а асимметричные углы левого элемента являются частями эллипса
Если честно, фигуры, полученные в результате применения вышеописанных настроек, выглядят странновато. Однако не забывайте о том, что окружности создаются с помощью таких параметров: border-radius: 50%. Окружность получается из-за того, что два значения, задающие одну сторону, складываются и получается 100% (50% + 50% = 100%) и прямых линий от исходного квадрата не остаётся. Если порассуждать в том же духе о восьми значениях, используемых при задании свойства border-radius, то окажется, что с их помощью можно описать фигуру, которая похожа на гитарный медиатор или на клетку живого организма.
Фигура, полученная в результате применения 8 значений, разделённых косой чертой
Четыре перекрывающихся эллипса, формирующих фигуру
Мне потребовалось некоторое время на то, чтобы к этому привыкнуть. Порой все эти конструкции бывает сложно осмыслить. Если вас привлекают сложные формы элементов, настраиваемые с помощью border-radius, можете воспользоваться этим небольшим инструментом.
Итоги
Теперь, когда вы знаете о том, что при настройке
border-radius можно использовать 8 значений, то, вы, если попробовали вышеупомянутый инструмент, можете ощутить лёгкое разочарование, так как он не даёт возможности управлять каждым значением независимо. Если это так — то вот, специально для вас, его версия, поддерживающая независимую настройку всех восьми значений. Прежде чем вы им воспользуетесь — вспомните один разговор из фильма «Охотники за привидениями» 1984-го года:— Не скрещивайте потоки.
— Почему?
— А то будет плохо.
Дело в том, что если вы переместите манипуляторы так, что они пересекутся на одной стороне фигуры, то она начнёт вести себя… Скажем так — она начнёт вести себя непредсказуемо. Да что там говорить — посмотрите сами. В конце концов, это не приведёт к вселенской катастрофе, но, делая это, помните о том, что мы вас предупредили.
Уважаемые читатели! Пользуетесь ли вы CSS-свойством border-radius?
border-radius — закругленная рамка (скругление углов)
Поддержка браузерами
| 12.0+ | 9.0+ | 4.0+ | 5.0+ | 10.5+ | 5.0+ |
Описание
CSS свойство border-radius позволяет сделать закруглённую рамку или скруглить углы элемента. Значение свойства определяет радиус окружности. При использовании свойства, вместо отрисовки обычных прямых углов элемента, будет использоваться закруглённая рамка с закруглёнными углами согласно дуге окружности с заданным радиусом:
Свойство border-radius может содержать от одного до четырёх значений, разделяемых между собой пробелами. От количества значений зависит то, как будут установлены радиусы скругления углов. Если указывается более одного значения, скругление углов устанавливается начиная с верхнего левого угла:
|
|
|
|
|
|
|
Овальные скругления
CSS свойство border-radius также позволяет сделать скругление углов ввиде дуги овала, а не круга:
Чтобы определить овал используется комбинация из двух значений, между которыми ставится символ /:
border-radius: 50px / 30px;
Значение, расположенное слева от слэша, определяет горизонтальный радиус, значение справа – вертикальный радиус.
Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.
Пример с овальными скруглениями:
|
Важно понимать, что форма элемента в любом случае остаётся прямоугольной. Поэтому, несмотря на то, что браузер отрисовывает закруглённые углы для элемента, содержимое элемента всё равно размещается в прямоугольной области и может выходить за границы скруглённых углов:
Примечание: если у элемента нет рамки, то браузер будет производить скругление углов для фоновой области.
| Значение по умолчанию: | 0 |
|---|---|
| Применяется: | ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse; |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.borderRadius=»5px» |
Синтаксис
border-radius: [величина | проценты]{1,4} [ / [величина | проценты]{1,4} ]Значения свойства
| Значение | Описание |
|---|---|
| величина | Величина радиуса указывается в единицах измерения, используемых в CSS. |
| % | Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
div {
border-radius: 100px;
}
Свойство border-radius | CSS справочник
CSS свойстваОпределение и применение
CSS свойство border-radius позволяет определить форму границ элемента. Это свойство является короткой записью для следующих четырёх свойств:
Радиус скругления применяется ко всему заднему фону, либо фоновому изображению, заданными свойством background (даже если у элемента отсутствуют границы). Точное место отсечения определяется и задается значением свойства background-clip.
- Скругление углов отсутствует. Значение по умолчанию 0 (ноль).
- Скругление углов (по типу дуги окружности). Значение /-я (от одного до четырёх) указываются в единицах измерения CSS (px, em, cm и т.д.) и определяют radius (радиус) скругления. Значения для каждого радиуса задаются в следующем порядке: top-left (верхний левый угол), top-right (верхний правый угол), bottom-right (нижний правый угол), bottom-left (нижний левый). Если bottom-left (нижний левый) опущен, то он такой же, как top-right (верхний правый угол). Если bottom-right (нижний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Если top-right (верхний правый угол) опущен, то он такой же, как top-left (верхний левый угол). Допускается указывать значения в процентах. Отрицательные значения недопустимы.
- Скругление углов (по типу дуги эллипса). Значения указываются в единицах измерения CSS (px, em, cm и т.д.). Порядок указания значений следующий (нижнее изображение): задаются значение /-я (от одного до четырёх) horisontal (горизонтального) радиуса скругления, а через косую черту задаются значение /-я (от одного до четырёх) vertical (вертикального). Допускается указывать значения в процентах. Отрицательные значения недопустимы.
Поддержка браузерами
CSS синтаксис:
border-radius:"1-4 length | 1-4 % | 1-4 length или 1-4 % / 1-4 length или 1-4 % | initial | inherit";
/* Радиус применяется ко всем четырем углам (по типу дуги окружности) */ border-radius : 15px; /* 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 15px 35%; /* 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 14px 18px 50%; /* 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 22% 11px 14px 15px; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - значение применяется ко всем четырем углам */ border-radius : 15px 15% / 15px; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left и bottom-right, второе top-right и bottom-left */ border-radius : 10px 15% / 10px 40px; /* горизонтальный радиус 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right /
вертикальный радиус - 1-ое значение top-left, второе top-right и bottom-left, третье bottom-right */ border-radius : 20px 15px 6em / 20px 25px 30%; /* горизонтальный радиус 1-ое значение top-left и bottom-right, второе top-right и bottom-left /
вертикальный радиус - 1-ое значение top-left, второе top-right, третье bottom-right, четвертое bottom-left */ border-radius : 15px 15% / 10px 15em 15px 5em;
JavaScript синтаксис:
object.style.borderRadius = "5px"
Значения свойства
| Значение | Описание |
|---|---|
| length | Определяет форму углов. Значение по умолчанию 0 (ноль). Отрицательные значения недопустимы. |
| % | Определяет форму углов в процентах. Отрицательные значения недопустимы. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Установка формы границы углов элемента в CSS</title>
<style>
div {
width : 50px; /* устанавливаем ширину блока */
height :