Как сделать круг в css

Узнайте, как использовать CSS для создания круга с примером кода, чтобы улучшить дизайн и внешний вид вашего сайта.

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

.circle {
  border-radius: 50px; /* Значение должно быть равным половине ширины и высоты элемента */
}

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

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* Теперь значение равно половине ширины и высоты */
}

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

.ellipse {
  border-radius: 50px / 100px; /* Первое значение — это радиус по горизонтали, а второе — радиус по вертикали */
}

Смешивание радиусов углов

Еще один интересный способ создания кругов — использование двух различных значений для радиусов углов. Вы можете использовать этот трюк, чтобы создать круг с закругленными краями. В этом случае вам понадобятся четыре значения, одно для каждого угла.

.rounded-circle {
  border-radius: 25px 50px 75px 100px; /* Значения указываются по часовой стрелке, сверху вниз */
}

Еще один пример использования различных радиусов углов — это создание круга с закругленными краями. Для этого вам потребуются два значения, одно для верхних и нижних углов, а второе для левых и правых.

.rounded-circle {
  border-radius: 25px 50px; /* Значение для верхнего и нижнего угла слева направо */
}

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

.circle {
  border-radius: inherit; /* Радиусы углов будут наследоваться от родительского элемента */
}

Наконец, вы можете использовать встроенные утилиты, такие как CSSmatic Border Radius Generator, чтобы просто построить и протестировать необходимые вам формы.