toolsmoah

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

Визуально создавайте и просматривайте свойства CSS border-radius.

Сгенерированный CSS
Отрегулируйте округлость каждого угла
Предварительный просмотр
Предварительный просмотр сгенерированного эффекта border-radius
Предварительный просмотр
Сгенерированный CSS
border-radius: 20px;
Примеры
Нажмите на предопределенные стили border-radius, чтобы применить их
Свойства радиуса границы

Порядок свойств

Свойство border-radius применяется по часовой стрелке: верхний левый → верхний правый → нижний правый → нижний левый

Сокращенные свойства

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

Советы по использованию

  • • Используйте 50%, чтобы создать идеальный круг
  • • 4-8px обычно подходит для кнопок
  • • 8-16px часто используется для карточек и панелей
  • • Асимметричный радиус может создавать уникальные эффекты дизайна
    Генератор радиуса границы | toolsmoah