Генератор радиусов границы CSS

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

Свойство border-radius выглядит просто, но имеет компактную сокращенную, которая сбивает людей с толку: одно значение закругляет все четыре угла, два значения устанавливают две диагонали и четыре значения по часовой стрелке сверху слева. Этот инструмент позволяет вам установить каждый угол независимо, а затем автоматически выводит кратчайший эквивалентный график, поэтому ваш CSS остается чистым.

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

Проценты и пиксели ведут себя по-разному на чем угодно, что не квадрат, и разница удивляет людей. радиус пикселя - это одна и та же кривая на каждом углу, в то время как процент измеряется против каждой оси отдельно, поэтому 50 процентов на широком поле дает эллипс, а не круг. Это свойство, которое превращает прямоугольник в форму таблетки или линзы. Спецификация также защищает вас от невозможной геометрии: когда радиусы вдоль одного края в сумме превышают длину этого края, браузер масштабирует каждый радиус на элементе пропорционально, а не перекрывает их, поэтому большое значение тихо перестает расти. Выход использует кратчайшее допустимое сокращение, поэтому четыре равных угла сжимаются до одного числа.

Как CSS-генератор с пограничным радиусом, полезная часть заключается в том, что он выполняет для вас сокращенную арифметику. Установите верхнюю левую и нижнюю правую до 24 и верхнюю правую и нижнюю левую до 8, в px, а на выходе будет читаться граница радиуса: 24px 8px; потому что диагональные пары совпадают. опустите нижнюю часть вправо до 0, и она станет трехзначным 24px 8px 0px, поскольку верхняя правая и нижняя левая все еще совпадают. Вы можете проверить каждый результат по предварительному просмотру перед копированием, для чего и предназначен генератор радиуса границы CSS.