ПаветтаГенератор border-radius
Скругление задаётся одним свойством, но у него восемь чисел: по два радиуса на каждый угол. Инструмент даёт крутить каждый отдельно и сразу показывает форму, а короткую запись собирает сам — если все углы одинаковые, четыре значения свернутся в одно.
Предпросмотр
Радиусы
Готовый CSS
Разобрать чужое значение
Восемь чисел в одном свойстве
Скругление задаётся одним свойством, но чисел у него восемь: по два радиуса на каждый угол — горизонтальный и вертикальный. Когда они равны, угол выходит круглым; когда различаются, получается эллиптический срез. Инструмент даёт крутить каждый отдельно и сразу показывает форму, а короткую запись собирает сам.
Сокращения работают по обычному правилу CSS: одно значение задаёт все четыре угла, два — противоположные пары, четыре — каждый угол по часовой начиная с левого верхнего. Эллиптические радиусы пишутся через косую черту: сначала все горизонтальные, потом все вертикальные.
Проценты считаются от размеров самого элемента, поэтому запись 50 % превращает квадрат в круг, а прямоугольник — в овал. Для аватарок это удобно, для карточек почти всегда нужны пиксели: иначе скругление поедет вместе с размером.
| Запись | Что получится |
|---|---|
| 8px | Все углы одинаково |
| 8px 0 | Диагональные пары |
| 12px 12px 0 0 | Скруглён только верх |
| 50% | Круг из квадрата |
| 40px / 20px | Эллиптический угол |
RoundRects, картинки-уголки и CSS3
Скруглённый прямоугольник — предмет отдельной легенды в истории интерфейсов. Билл Аткинсон, автор графики первого Macintosh, рассказывал, как Стив Джобс убеждал его, что скруглённые прямоугольники окружают человека повсюду, и вывел на прогулку показывать дорожные знаки и окна. Через неделю появилась процедура RoundRects, и все окна системы получили мягкие углы.
В вебе до 2005 года круглый угол рисовали картинками: под каждый угол клали отдельный фрагмент, и вёрстка карточки занимала четыре лишних изображения плюс обёртки. Существовали целые библиотеки, которые генерировали эти углы скриптом.
Свойство border-radius пришло с префиксами в Firefox и Safari в 2005–2006 годах, а в стандарт CSS3 Backgrounds and Borders вошло позже. Массовым оно стало после выхода Internet Explorer 9 в 2011 году — до этого верстальщики держали для него отдельный запасной вариант. Эллиптический синтаксис с косой чертой появился в спецификации сразу, но пользуются им редко: почти вся вёрстка обходится равными радиусами.
Какие радиусы брать и как считать вложенные
Для карточек берите 8–16 пикселей, для кнопок 8–12, для полей ввода столько же, сколько у кнопок рядом, — разнобой сразу бросается в глаза. Полное скругление кнопки записывается как 999px: значение больше половины высоты браузер сам ограничит, и получится идеальная капсула при любой высоте.
Вложенные скругления считают по правилу: радиус внутреннего элемента равен внешнему минус отступ. Карточка с радиусом 16 и внутренним отступом 8 требует от картинки внутри радиуса 8, иначе между ними появится заметный зазор. Тень под скруглённой карточкой соберёт генератор box-shadow, а сложную форму вырежет генератор clip-path. Форма скругления в CSS остаётся дугой окружности. Плавный переход кривизны, который применяют в промышленном дизайне и в системах Apple, браузеры пока не умеют — его приходится изображать через clip-path или SVG. Если радиусов не хватает на размер элемента, браузер пропорционально уменьшает их все — карточка шириной 30 пикселей с радиусом 40 не превратится в кашу, углы просто станут вдвое меньше.
Согласуйте радиусы по всему сайту. Карточки, кнопки, поля ввода и всплывающие окна должны пользоваться двумя-тремя значениями из общего набора, вынесенного в переменные. Разнобой в скруглениях читается как небрежность даже теми, кто не может сформулировать, что именно не так.
| Чисел в свойстве | восемь |
| Радиусы через | косую черту |
| Карточка | 8–16px |
| Кнопка-капсула | 999px |
| Круг из квадрата | 50% |
| Вложенный радиус | внешний − отступ |
| Префиксы в браузерах | 2005–2006 |
| Поддержка в IE | с версии 9 |
Как пользоваться
Через слэш задаются эллиптические углы: горизонтальный и вертикальный радиусы разной длины, именно так рисуют каплю, лист и мягкие «блобы». Готовое свойство копируется одной кнопкой, чужое — разбирается обратно в ползунки.
- Он двигает все четыре угла разом — этого хватает в большинстве случаев.
- Тогда каждый угол настраивается своим ползунком: так делают билеты, ярлыки и хвостики у сообщений.
- Второй набор ползунков задаёт вертикальный радиус — форма перестаёт быть круговой.
- Готовое свойство под предпросмотром, в самой короткой записи из возможных.
Частые вопросы
Почему у border-radius восемь значений
Каждый угол — это четверть эллипса, а у эллипса два радиуса: горизонтальный и вертикальный. Полная запись выглядит как «четыре горизонтальных / четыре вертикальных». Когда оба радиуса угла равны, четверть становится дугой окружности, и запись сокращается до четырёх чисел или до одного.
В каком порядке идут углы
По часовой стрелке от левого верхнего: верхний левый, верхний правый, нижний правый, нижний левый. Если написать два числа, первое достанется паре «верхний левый и нижний правый», второе — остальным. Три числа: первое — верхний левый, второе — обе оставшиеся диагонали, третье — нижний правый.
Проценты или пиксели
Пиксели дают одинаковое скругление независимо от размера блока, проценты считаются от его ширины и высоты — угол растягивается вместе с элементом. Для кнопок и карточек берут пиксели, для аватарок и «блобов» — проценты. Идеальный круг получается из 50% на квадратном элементе.
Как сделать таблетку со скруглением по высоте
Поставить заведомо большой радиус, например 999px. Браузер обрежет его до половины меньшей стороны, поэтому форма останется правильной при любой высоте. Записывать 50% для этого не стоит: на широкой кнопке проценты дадут вытянутый эллипс вместо полукруга.
Почему скругление обрезает картинку внутри
Не обрезает по умолчанию: содержимое выходит за скруглённый край. Чтобы обрезалось, родителю нужен overflow: hidden. Отдельный случай — фон и рамка: они скругляются всегда, потому что рисуются самим блоком.
Что происходит, когда радиусы не помещаются
Браузер пропорционально уменьшает все радиусы, пока сумма соседних не станет меньше стороны. Поэтому у маленького блока с большими радиусами форма получается не такой, как задумано: увеличьте элемент или уменьшите числа.
Спросите нейросети об инструменте
Похожие инструменты
Тень блока со слоями: смещение, размытие, растяжение, цвет и прозрачность. Внутренняя тень, готовые пресеты и разбор чужого значения.
ОткрытьГенератор clip-pathОбрезка блока по фигуре: многоугольник с перетаскиванием точек, круг, эллипс и рамка. Скосы, шестиугольники и звёзды из пресетов.
ОткрытьГенератор CSS-анимацииБольше двадцати эффектов появления, внимания и движения. Выдаёт и правило keyframes, и свойство animation целиком.
ОткрытьГенератор text-shadowТень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьГенератор CSS-градиентовЛинейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.