DevToolPal
RU

Генератор CSS border-radius

Настраивайте CSS border-radius для каждого угла, включая эллиптические углы и формы-кляксы, в px, % или rem, с живым просмотром, шаблонами и самым коротким CSS для копирования.

Работает локально, без загрузки на сервер

Углы

Единица

Просмотр

CSS

Шаблоны
CSS скругления
 
 
 
 
 
Что делает инструмент


Генератор border-radius позволяет настраивать скругления визуально и копировать самый короткий CSS. Задайте один радиус для всех углов или свой для каждого, включите эллиптические углы, чтобы у каждого угла был отдельный горизонтальный и вертикальный радиус, и смотрите, как меняется просмотр при перетаскивании. Поддерживаются px, %, rem и em; можно вставить готовое значение border-radius и редактировать его. Всё работает в вашем браузере.


Как пользоваться


    

  1. Начните с шаблона или оставьте пример.
    2. 

  2. Выберите Единицу. При смене единицы текущие значения пересчитываются (rem и em — 16px, % — относительно блока просмотра).
    3. 

  3. Включите Одинаковый радиус для всех углов, чтобы управлять одним ползунком, или выключите, чтобы задать Левый верхний, Правый верхний, Правый нижний и Левый нижний по отдельности.
    4. 

  4. Включите Эллиптические углы — у каждого угла появятся ползунки По горизонтали и По вертикали.
    5. 

  5. Измените размер просмотра через Ширину и Высоту и скопируйте код из карточки CSS. Включите вывод полных свойств, если нужны четыре отдельных свойства.
    6. 



Пример


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Полезно знать


    

  • Самая короткая запись. Одинаковые значения объединяются: четыре равных угла дают одно значение, а часть после черты опускается, если все углы круговые.
    • 

  • Проценты зависят от блока. Горизонтальные проценты считаются от ширины элемента, вертикальные — от высоты, поэтому 50% у прямоугольника дают эллипс, а не круг.
    • 

  • Радиусы, которые не помещаются, браузер уменьшает вместе — поэтому огромное значение в px даёт аккуратную «таблетку».
    • 

  • Дочерние элементы и переполнение. Скругление обрезает фон и рамку, но не содержимое дочерних элементов: добавьте overflow: hidden, чтобы обрезать картинки внутри блока.
    • 

 
  
 
Частые вопросы
 
 
  › Что означает косая черта в border-radius?  
Значения до черты — горизонтальные радиусы, после — вертикальные. Если они различаются, угол становится четвертью эллипса, а не окружности. Например, 50% / 30% даёт более плоскую дугу, чем 50%.
 
  › В каком порядке записываются четыре угла?  
По часовой стрелке от левого верхнего: левый верхний, правый верхний, правый нижний, левый нижний. Если значений меньше, CSS повторяет их: два значения задают левый верхний/правый нижний и правый верхний/левый нижний, три — левый верхний, правый верхний/левый нижний и правый нижний.
 
  › Как сделать круг или «таблетку»?  
border-radius: 50% превращает квадрат в круг, а прямоугольник — в эллипс. Для «таблетки» с круглыми концами при любой ширине используйте очень большую длину, например 9999px: браузер уменьшает радиусы, которые не помещаются, и концы остаются идеально круглыми.
 
  › Как делают формы-кляксы (blob)?  
Кляксы используют восемь разных процентов: четыре горизонтальных и четыре вертикальных радиуса, например 30% 70% 70% 30% / 30% 30% 70% 70%. Выберите шаблон кляксы, включите «Эллиптические углы» и меняйте форму ползунками углов.