Генератор CSS border-radius
Настраивайте скругление углов наглядно: все углы сразу или каждый отдельно, в px или %, круги и органические формы, затем копируйте код CSS, SCSS или Tailwind.
Загрузка: Генератор CSS border-radius…
Ваши файлы не покидают устройство
Как пользоваться: Генератор CSS border-radius
- 1
Откройте «Генератор CSS border-radius» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Свойство CSS border-radius скругляет углы блоков, кнопок, карточек и изображений. Этот генератор border-radius позволяет двигать ползунки, видеть изменение формы в живом предпросмотре и копировать код. Свяжите все четыре угла для равномерного скругления или разъедините их, чтобы настроить каждый угол отдельно: от аккуратных карточек до идеальных кругов и органических форм.
Как пользоваться
- Двигайте ползунок, чтобы скруглить все углы сразу, или разъедините углы и настройте каждый.
- Переключайтесь между px для фиксированного скругления и % для форм, которые масштабируются вместе с элементом.
- Используйте готовые варианты: квадрат, скругление, круг и другие, или случайную форму блоба.
- Измените цвет блока и фон предпросмотра под свой дизайн.
- Скопируйте код CSS, SCSS или Tailwind.
Популярные формы
| Форма | CSS |
|---|---|
| Аккуратная карточка | border-radius: 8px; |
| Кнопка таблетка | border-radius: 9999px; |
| Круг (квадратный элемент) | border-radius: 50%; |
| Один скруглённый угол | border-radius: 0 24px 0 0; |
| Лист | border-radius: 0 50% 0 50%; |
Советы
- Значения в процентах масштабируются вместе с элементом, поэтому форма одинакова на любом экране.
- Вложенные элементы: задавайте внутреннему элементу радиус меньше, чем у родителя (внешний радиус минус padding), чтобы изгибы были ровными.
- Изображениям нужен overflow: hidden у родителя или радиус прямо на img.
- Будьте последовательны: используйте два или три размера радиуса во всей дизайн системе.
Добавьте глубину с помощью генератора теней CSS и стройте раскладки в генераторе Flexbox.
Частые вопросы
Как сделать круг в CSS?
Задайте квадратному элементу border-radius: 50%. У прямоугольника это же значение даст эллипс.
Можно ли скруглить только некоторые углы?
Да. Разъедините углы и настройте каждый или используйте запись из четырёх значений: верхний левый, верхний правый, нижний правый, нижний левый.
Что использовать: px или %?
px подходит для постоянного скругления кнопок и карточек, а % для форм, которые должны масштабироваться вместе с элементом, например кругов.
Как сделать кнопку в форме таблетки?
Используйте очень большой радиус, например 9999px. Углы станут полностью круглыми при любой высоте кнопки.
Можно ли получить классы Tailwind?
Да. Выберите экспорт Tailwind, чтобы получить классы rounded или произвольные значения для вашей формы.
Работает ли border-radius с изображениями?
Да. Примените его к элементу img или к родителю с overflow: hidden.