Генератор border-radius
Скругление задаётся одним свойством, но у него восемь чисел: по два радиуса на каждый угол. Инструмент даёт крутить каждый отдельно и сразу показывает форму, а короткую запись собирает сам — если все углы одинаковые, в коде окажется одно число, а не четыре. Через слэш задаются эллиптические углы: горизонтальный и вертикальный радиусы разной длины, именно так рисуют каплю, лист и мягкие «блобы». Готовое свойство копируется одной кнопкой, чужое — разбирается обратно в ползунки.
Предпросмотр
Радиусы
Готовый CSS
Разобрать чужое значение
Как пользоваться
- Он двигает все четыре угла разом — этого хватает в большинстве случаев.
- Тогда каждый угол настраивается своим ползунком: так делают билеты, ярлыки и хвостики у сообщений.
- Второй набор ползунков задаёт вертикальный радиус — форма перестаёт быть круговой.
- Готовое свойство под предпросмотром, в самой короткой записи из возможных.
Частые вопросы
Почему у border-radius восемь значений
Каждый угол — это четверть эллипса, а у эллипса два радиуса: горизонтальный и вертикальный. Полная запись выглядит как «четыре горизонтальных / четыре вертикальных». Когда оба радиуса угла равны, четверть становится дугой окружности, и запись сокращается до четырёх чисел или до одного.
В каком порядке идут углы
По часовой стрелке от левого верхнего: верхний левый, верхний правый, нижний правый, нижний левый. Если написать два числа, первое достанется паре «верхний левый и нижний правый», второе — остальным. Три числа: первое — верхний левый, второе — обе оставшиеся диагонали, третье — нижний правый.
Проценты или пиксели
Пиксели дают одинаковое скругление независимо от размера блока, проценты считаются от его ширины и высоты — угол растягивается вместе с элементом. Для кнопок и карточек берут пиксели, для аватарок и «блобов» — проценты. Идеальный круг получается из 50% на квадратном элементе.
Как сделать таблетку со скруглением по высоте
Поставить заведомо большой радиус, например 999px. Браузер обрежет его до половины меньшей стороны, поэтому форма останется правильной при любой высоте. Записывать 50% для этого не стоит: на широкой кнопке проценты дадут вытянутый эллипс вместо полукруга.
Почему скругление обрезает картинку внутри
Не обрезает по умолчанию: содержимое выходит за скруглённый край. Чтобы обрезалось, родителю нужен overflow: hidden. Отдельный случай — фон и рамка: они скругляются всегда, потому что рисуются самим блоком.
Что происходит, когда радиусы не помещаются
Браузер пропорционально уменьшает все радиусы, пока сумма соседних не станет меньше стороны. Поэтому у маленького блока с большими радиусами форма получается не такой, как задумано: увеличьте элемент или уменьшите числа.
Данные куда-то отправляются
Нет, всё собирается в браузере.
Похожие инструменты
Список в строку с разделителем и обратно. Переносы ↔ запятые/пробелы.
ОткрытьРазбить текст на частиДелит длинный текст на куски нужной длины: Telegram 4096, подпись 1024, ВК 4000, description 160, SMS 70. Не рвёт слова и предложения.
ОткрытьИзменить размер фотоПиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьТипографорКавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьГенератор sitemap.xmlСоберёт ссылки прямо с вашего сайта по адресу или сделает карту из готового списка URL. lastmod, changefreq, priority.
ОткрытьОбрезать строкиУдалить N символов с краёв, текст до/после символа, убрать приставку или окончание.
ОткрытьЕщё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.