border-radius
border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.
Интерактивный пример
Скругление применяется ко всему background , даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip .
Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse .
Примечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit , что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
Синтаксис
Свойство border-radius может быть задано как:
- одно, два, три или четыре значения <length> или <percentage> . Используется для задания обычного радиуса углов.
- одна, две, три или четыре пары значений <length> or <percentage> , разделённые «/». Используется для задания эллиптического скругления.
Значения
| radius |  |
<length> или <percentage> устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара). |
|---|---|---|
| top-left-and-bottom-right |  |
<length> или <percentage> устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями. |
| top-right-and-bottom-left |  |
<length> или <percentage> устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями. |
| top-left |  |
<length> или <percentage> устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями. |
| top-right |  |
<length> или <percentage> устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями. |
| bottom-right |  |
<length> или <percentage> устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями. |
| bottom-left |  |
<length> или <percentage> устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями. |
<length>
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.
CSS: интересные возможности border-radius
Что можно сделать с помощью CSS-свойства 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?
How to set border radius of some corner only with CSS
As shown above, can I give a radius to the top parts only and not to bottom or sometimes to bottom not to top?
And is there any idea to give border radius to one corner only?
3 Answers 3
Like border-radius:top-left top-right bottom-right bottom-left ,
Either use border-radius, such as:
Or, for the top left border, you can be more specific with:
Here’s the CSS for the rounded corners only on a div with a class of box:
You may also find this helpful: http://css3generator.com/
Edit: Apparently you don’t need the webkit prefix anymore!
-
The Overflow Blog
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.13.43307
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
border-radius
border-radius CSS свойство округляет углы внешнего края элемента. Вы можете установить один радиус, чтобы сделать круглые углы, или два радиуса, чтобы сделать эллиптические углы.
Try it
Радиус применяется ко всему background , даже если элемент не имеет границы; Точная позиция отсечения определяется свойством background-clip .
border-radius собственности не распространяется на элементы таблицы , когда border-collapse является collapse .
Примечание. Как и с любым сокращенным свойством, отдельные дочерние свойства не могут наследовать, например, в border-radius:0 0 inherit inherit , что частично перекрывает существующие определения. Вместо этого должны использоваться отдельные свойства.
Constituent properties
Это свойство является сокращением для следующих свойств CSS:
Syntax
Свойство border-radius определяется как:
- одно, два, три или четыре значения <length> или <percentage> . Это используется для установки единого радиуса для углов.
- за ними необязательно следуют «/» и одно, два, три или четыре значения <length> или <percentage> . Это используется для установки дополнительного радиуса, так что вы можете иметь эллиптические углы.
Values
| radius | Является <length> или <percentage> , обозначающим радиус использовать для границы в каждом углу границы. Он используется только в синтаксисе с одним значением. |
| top-left-and-bottom-right | Является <length> или <percentage> , обозначающим радиус для использования границы в верхний левый и нижний правый углы блока элемента. Он используется только в синтаксисе с двумя значениями. |
| top-right-and-bottom-left | Является <length> или <percentage> , обозначающим радиус использовать для границы в верхнем правом и нижнем левом углах коробки элемента. Он используется только в синтаксисах с двумя и тремя значениями. |
| top-left | Является <length> или <percentage> , обозначающим радиус использовать для границы в верхнем левом углу блока элемента. Он используется только в трех- и четырехзначных синтаксисах. |
| top-right | Является <length> или <percentage> , обозначающим радиус использовать для границы в правом верхнем углу блока элемента. Он используется только в синтаксисе из четырех значений. |
| bottom-right | Является <length> или <percentage> , обозначающим радиус использовать для границы в нижнем правом углу блока элемента. Он используется только в трех- и четырехзначных синтаксисах. |
| bottom-left | Является <length> или <percentage> , обозначающим радиус для использования границы в нижнем левом углу блока элемента. Он используется только в синтаксисе из четырех значений. |
Обозначает размер радиуса окружности,или полуосевой и полуминутной осей эллипса,используя значения длины.Отрицательные значения недействительны.
Обозначает размер радиуса окружности или полуосей эллипса в процентах.Проценты для горизонтальной оси означают ширину окошка;проценты для вертикальной оси означают высоту окошка.Отрицательные значения недействительны.