Генератор CSS border-radius — готовый код скруглённых углов

Как это работает

1. 1
   Скруглите углы Двигайте ползунки, чтобы скруглить каждый угол. Оставьте галочку «Связать углы», чтобы менять все четыре сразу, или снимите её и задайте каждому углу свой радиус — так получаются формы листа и «капли».
2. 2
   Выберите единицы px даёт фиксированное скругление, одинаковое при любом размере элемента. % масштабирует радиус вместе с элементом: 50% на всех углах превращает квадрат в круг.
3. 3
   Скопируйте CSS Строка border-radius под превью обновляется, пока вы двигаете ползунки, и всегда сворачивается до кратчайшей записи. Нажмите «Копировать» и вставьте код в свою таблицу стилей.

Часто задаваемые вопросы

В каком порядке идут четыре значения border-radius?

По часовой стрелке от левого верхнего угла: верхний левый, верхний правый, нижний правый, нижний левый. Например, border-radius: 8px 24px 8px 24px скругляет верхний левый и нижний правый углы на 8px, а остальные два — на 24px. Генератор сам расставляет значения в этом порядке.

Почему в результате иногда меньше четырёх значений?

border-radius сворачивается по тем же правилам, что margin и padding: если нижний левый угол равен верхнему правому, его можно опустить, затем нижний правый сверяется с верхним левым, затем верхний правый с верхним левым. Четыре одинаковых угла сворачиваются в одно значение вроде border-radius: 24px. Генератор всегда выдаёт кратчайшую форму.

Как сделать идеальный круг или «таблетку»?

Для круга задайте элементу равные ширину и высоту и поставьте 50% на все углы. Для «таблетки» — полностью скруглённого прямоугольника — используйте фиксированный радиус больше половины высоты элемента: обычно пишут 9999px, потому что браузер сам ограничивает радиус тем, что помещается.

Чем радиус в px отличается от радиуса в %?

Радиус в px абсолютный: 16px выглядит одинаково и на кнопке, и на карточке во всю ширину. Радиус в % считается от размера самого элемента, причём по каждой оси отдельно: горизонтальный — от ширины, вертикальный — от высоты. Поэтому 50% на неквадратном элементе даёт эллиптический угол, а не круговой.

Почему скругление выглядит меньше заданного значения?

Если радиусы двух соседних углов в сумме больше стороны между ними, браузер пропорционально уменьшает все радиусы, чтобы они не накладывались. Радиус 100px на блоке высотой 120px отрисуется меньше 100px. Так прописано в спецификации CSS — это не ошибка.

Обрезает ли border-radius содержимое элемента?

Сам по себе — нет: скругляются фон и рамка, а вложенные элементы, например изображения, могут выступать за дугу. Добавьте скруглённому элементу overflow: hidden, чтобы обрезать содержимое по той же форме.

Из блога

Похожие инструменты