Граница-радиус - CSS-хитрости

Вы можете придать любому элементу «закругленные углы», применив border-radiusсквозной CSS. Вы заметите, только если произойдет изменение цвета. Например, если элемент имеет цвет фона или границу, отличную от цвета элемента, над которым он находится. Простые примеры:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Это действительно больше не обязательно, но для максимально возможной поддержки браузером вы можете использовать префикс -webkit-и -moz-:

.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )

Обратите внимание на порядок этих свойств: префиксы поставщиков указываются первыми, а версия «spec» без префиксов - последней. Это правильный способ сделать это. Радиус границы - особенно хороший пример того, почему мы так поступаем. В несколько более сложной версии использования border-radius(где вы передаете два значения вместо одного) старый -webkit-префикс поставщика будет делать что-то совершенно иное, чем версия «spec». Поэтому, если мы слепо скопируем / вставим одни и те же значения во все три свойства, мы сможем увидеть разные результаты в разных браузерах. Узнайте больше об этом сценарии. Для обеспечения максимальной согласованности в долгосрочной перспективе лучше всего указывать «спецификационную» версию последней.

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

Если элемент имеет фон изображения, он будет естественно обрезан по закругленному углу:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Иногда вы можете увидеть background-color«утечку» за пределами границы, если border-radiusона присутствует. (видеть). Чтобы этого не произошло, используйте background-clip:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

С одним значением border-radiusбудет одинаковым для всех четырех углов элемента. Но это не обязательно. Вы можете указать каждый угол отдельно, если хотите:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Вы также можете указать два или три значения. MDN хорошо это объясняет:

Если установлено одно значение, этот радиус применяется ко всем 4 углам .
Если два значения установлены, то первое применяется к top-leftи bottom-rightугол, второй относится к top-rightи bottom-leftуглу.
Четыре значения применяются к top-left, top-right, bottom-right, bottom-leftугол в таком порядке.
Три значения: второе значение применяется к top-rightтакже bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Вы также можете указать радиусы, на которые будет закругляться угол. Другими словами, закругление не обязательно должно быть идеально круглым, оно может быть эллиптическим. Это делается с помощью косой черты («/») между двумя значениями.

#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )

Примечание. Firefox поддерживает эллиптические границы только в браузерах WebKit версии 3.5+ и более ранних (например, Safari 4) неправильно обрабатывает «40 пикселей 10 пикселей» как то же самое, что и «40 пикселей / 10 пикселей».

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

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Примечание. В Safari процентные значения для border-radius поддерживаются только в версии 5.1+. В Opera поддерживается только в 11.5+.

Вот каждое отдельное свойство с префиксом поставщика:

.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )

Примечание. Каждое из этих значений также может иметь значение, разделенное пробелом, например «5px 10px», которое в сокращении ведет себя как значение, разделенное косой чертой (горизонтальный радиус (пробел) вертикальный радиус).

Ресурсы

Быстрый инструмент для создания кода радиуса границы
Документы Mozilla
В поисках идеального радиуса
Нужен ли нам больше префикс border-radius?

Вот небольшая штука, по которой можно поиграть с различными свойствами и значениями:

См. Pen All the border-radius »Криса Койера (@chriscoyier) на CodePen.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.