Что умеет border-radius

CSS
Добавлено: 22 окт. 2018 г.

Освоение border-radius

Одиночное значение

Давайте начнем с основ. Надеюсь это вас не утомит. Возможно, вы хорошо знакомы с CSS и так же знаете о border-radius. Он существует довольно долго и в основном используется с одним значением: border-radius: 1em; 

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

Как вы могли заметить из примера выше, кроме фиксированных размеров px, rem, em вы так же можете использовать и проценты. В основном они используются для создания круга. Для этого нужно установить значение border-radius в 50%. Процентное значение основано на ширине и высоте элемента, поэтому при применении их на прямоугольнике, вы не получите симметричных углов. Ниже пример, показывающий разницу между border-radius: 110px и border-radius: 30% примененных к прямоугольнику.

Обратите внимение, что на правом прямоугольнике углы не симметиричны. Запомните это, мы к этому еще вернемся.

Четыре разных значения

При использовании более одного значения, вы устанавливаете его для каждого угла по часовой стрелке, начиная с верхнего левого угла элемента. Так же можно использовать значения в процентах и даже комбинировать их с фиксированными.

Восемь значений, разделенные слэшем

Я думаю, что большинство из вас уже сделали все, что было описано выше. А сейчам мы подходим к самой интересной части. Что будет, если вы разделите значения косой чертой и укажите до восьми значений?

Значение перед косой чертой устанавливает горизонтальный радиус, а значение после нее - вертикальный. Если же косой черты нет, то значени будут равны для обоих радиусов. W3C

Если сравнить border-radius: 4em 8em и border-radius: 4em / 8em результаты будут совершенно разные. 

Симметричные углы слева образуют четверть круга, тогда как ассиметричные углы справа являются частью элипса. 

Порой таким образом можно получить довольно странные и необычные фигуры.

В итоге - это 4 перекрвывающих друг друга элипка, которые образуют окончательную форму. Это же легко!

Для тех, кто запаниковал имеется генератор

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

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

Оригинал: https://9elements.com/io/css-border-radius/