Генератор Border Radius

Что такое border-radius?

border-radius — это свойство CSS, которое скругляет углы блока элемента. Одно значение скругляет каждый угол одинаково; четыре значения скругляют каждый угол независимо. Это одно из наиболее используемых свойств в современном веб-дизайне — кнопки в форме таблетки, скруглённые карточки, круглые аватары и модальные окна с мягкими углами — всё это сводится к одному объявлению.

Порядок углов

Когда вы указываете четыре значения, CSS всегда применяет их в одном и том же порядке, начиная с верхнего левого угла и двигаясь по часовой стрелке:

1. Верхний левый
2. Верхний правый
3. Нижний правый
4. Нижний левый

Так, border-radius: 10px 20px 30px 40px; скругляет верхний левый угол на 10px, верхний правый на 20px, нижний правый на 30px и нижний левый на 40px. Этот инструмент следует тому же порядку, и его четыре ползунка углов помечены соответственно.

Как использовать этот инструмент

1. Оставьте Одинаково для всех углов включённым и перетащите ползунок Верхний левый, чтобы установить один радиус для всего блока — это обычный случай (кнопки, карточки, аватары).
2. Отключите Одинаково для всех углов, чтобы показать независимые ползунки для каждого из четырёх углов, и устанавливайте их отдельно для асимметричной формы (речевые пузыри, капли, наклонённые карточки).
3. Выберите Единицу измерения — px для фиксированного радиуса в пикселях, % для радиуса относительно размера самого элемента (полезно для идеальных кругов/эллипсов на квадратных блоках) или em/rem для масштабирования с размером шрифта.
4. Скопируйте сгенерированный CSS из поля CSS или загрузите его как файл .css и вставьте в вашу таблицу стилей.

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

Почему выход иногда короче, чем ожидается

Если все четыре угла оканчиваются одинаковыми, инструмент выдаёт компактную форму с одним значением (border-radius: 20px;) вместо ненужного повторения одного значения четыре раза (border-radius: 20px 20px 20px 20px;). Оба варианта — допустимый CSS и отображаются одинаково — форма с одним значением просто чище читается и поддерживается. Как только какой-то угол отличается, все четыре значения записываются явно, в порядке верхний левый → верхний правый → нижний правый → нижний левый, описанном выше.

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

Могу ли я использовать процент для идеального круга? Да — установите единицу на % и (однородный) радиус на 50% на квадратном элементе (одинаковая ширина и высота). Это скруглит все четыре угла в полный круг.

В чём разница между px, %, em и rem? px — это фиксированный размер независимо от контекста. % относится к ширине/высоте самого элемента, поэтому автоматически масштабируется, если размер блока изменится. em относится к размеру шрифта самого элемента; rem относится к размеру шрифта корневого элемента (html), поэтому масштабируется согласованно с базовым размером текста страницы, где бы он ни использовался.

Поддерживает ли этот инструмент эллиптические углы (отдельные горизонтальные/вертикальные радиусы)? Пока нет — этот инструмент охватывает обычные однородные и четырёхугольные случаи. Для эллиптических углов используйте CSS shorthand border-radius: <горизонтальные значения> / <вертикальные значения> непосредственно в вашей таблице стилей.

Будет ли это работать в каждом браузере? Да. border-radius поддерживается без префикса во всех основных браузерах уже более десяти лет.

Конфиденциальность

Всё происходит в вашем браузере. Никакой CSS, значения или параметры, которые вы вводите, никогда не отправляются на сервер — объявление генерируется и обновляется локально по мере ввода текста.