Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор скруглений CSS
Настраивайте радиусы четырёх углов вместе или отдельно, проверяйте эллиптические скругления и экспортируйте border-radius.
Эллиптические углы
Предпросмотр
CSS
Об инструменте
Сравните круглые и эллиптические углы для кнопок, карточек или значков.
Как пользоваться
Выберите px или % и задайте радиусы ползунками либо числами. Изначально углы связаны; отключите связь для раздельной настройки. В эллиптических параметрах включите отдельные вертикальные радиусы, чтобы независимо менять горизонтальное и вертикальное скругление.
Диапазон — 0–500 px или 0–100%. Предпросмотр и скачанная либо скопированная декларация используют одинаковые значения. Проценты зависят от размеров элемента. Смена единиц меняет смысл чисел и не сохраняет автоматически тот же визуальный размер.
Частые вопросы
Что означает косая черта в border-radius?
До неё идут горизонтальные радиусы, после — вертикальные. Перекрывающиеся радиусы CSS пропорционально уменьшает, чтобы они помещались в блок.
Почему 50% даёт овал, а не круг?
Процентные радиусы отдельно рассчитываются от ширины и высоты. При 50% прямоугольный блок становится эллипсом; для круга ширина и высота должны совпадать. Для фиксированного радиуса углов используйте пиксели и проверяйте CSS на реальных размерах своего элемента.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0