Border Radius Generator
Generate border radius
Generate border radius Запускается локально в вашем браузере
border-radius: 12px;
About the
Генератор радиуса границы независимо устанавливает четыре угла прямоугольника с предварительным просмотром в реальном времени и предоставляет вам CSS. Порядок сокращений — это то, о чем все забывают: вверху слева, вверху справа, внизу справа, внизу слева, по часовой стрелке от верхнего левого угла. Одно значение применяется ко всем четырем углам, два значения применяются к диагональным парам, а четыре значения по очереди относятся к каждому углу. Когда все четыре совпадают, инструмент выдает форму с одним значением, которая вам действительно нужна большую часть времени.
Where people use the
- Сопоставление радиуса со спецификацией дизайна без угадывания значений пикселей.
- Скругление только верхних углов карточки или модального окна.
- Формируем кнопку-таблетку радиусом в половину высоты элемента.
- Находим радиус, превращающий квадратный аватар в круг.
How to use the
- 1
Перетащите угловой ползунок
Каждый угол имеет свой ползунок от 0 до 150 пикселей. Поле предварительного просмотра округляется по мере его перемещения.
- 2
Сохраняйте углы связанными или разъедините их.
Если ссылка включена, перемещение любого ползунка перемещает все четыре вместе. Выключите его, чтобы сформировать отдельные углы, например, хвост речевого пузыря или форму листа.
- 3
Прочтите CSS
Если все четыре совпадают, вы получаете сокращение с одним значением. Если они различаются, вы получаете полную четырехзначную форму по часовой стрелке.
- 4
Вместо этого рассмотрим процент
Радиус 50 процентов квадратного элемента дает круг. Замените единицу измерения пикселей на процент в таблице стилей, если это то, что вам нужно.
Советы и лучшие практики
- Используйте проценты, когда размер элемента изменяется, и пиксели, когда этого не происходит.
- Кнопка таблетки не имеет фиксированного радиуса; это половина высоты, поэтому 9999 пикселей — ленивый, но надежный ответ.
- Сохраняйте одинаковый радиус во всем наборе компонентов; смешивание 4px, 6px и 8px выглядит случайным.
Часто задаваемые вопросы
В каком порядке расположены четыре значения?
По часовой стрелке сверху слева: вверху слева, вверху справа, внизу справа, внизу слева. Полезная мнемоника заключается в том, что она начинается с того места, где вы начинаете читать, и движется по кругу, как циферблат.
Что означают два или три значения?
Два значения задают диагонали: первое — верхний левый и нижний правый, второе — верхний правый и нижний левый. Три значения задают верхний левый, затем верхний правый и нижний левый вместе, затем нижний правый.
Как мне сделать круг?
Используйте 50 процентов для элемента, который уже является квадратным. Использование пикселей дает круг только в том случае, если радиус равен половине ширины, что нарушается в момент изменения размера элемента.
Могу ли я закруглить углы по-разному по горизонтали и по вертикали?
Полный синтаксис позволяет записать эллиптический радиус в виде горизонтальных значений, косой черты, а затем вертикальных значений. Этот инструмент создает более простую однородную форму, поэтому добавьте версию с косой чертой вручную, если вам нужна эта форма.
Почему мой закругленный угол обрезан?
Потому что дочерний контент не обрезается по закругленному окну. Добавьте скрытое переполнение к элементу, иначе изображение или фон внутри него по-прежнему будут иметь квадратные углы.