Developer ToolsГенератор Радиуса Границы
Визуально создавайте сложные CSS-формы с border-radius и независимым управлением углами. Предпросмотр в реальном времени и мгновенное копирование CSS-кода.
Настройки Углов
Единица:
Предпросмотр и CSS-код
border-radius: 8px
Сокращённый
.element {
border-radius: 8px;
}Полный
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}Похожие Инструменты
О Генераторе Радиуса Границы
Как Это Работает
- Настройте каждый угол с помощью ползунков или числовых полей
- Включите «Связать все углы» для одновременного управления всеми четырьмя углами
- Выберите единицу (px или %) в зависимости от нужного типа размера
- Используйте пресеты для мгновенного применения форм: круг, таблетка или квадрат
- Настройте цвет фона и элемента для реалистичного предпросмотра
- Скопируйте сгенерированный CSS одним кликом
Типичные Случаи Использования
- Проектирование кнопок, карточек и полей ввода со скруглёнными углами
- Создание тегов и бейджей в форме таблетки
- Построение круглых аватаров и иконок с border-radius 50%
- Генерация уникальных асимметричных форм для креативных макетов
- Прототипирование UI-компонентов с точным управлением углами
- Изучение и эксперименты со значениями CSS border-radius
Часто Задаваемые Вопросы
Что такое CSS border-radius?
CSS border-radius — это свойство, которое скругляет углы блока элемента. Принимает от одного до четырёх значений, задающих радиусы верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.
Как пользоваться Генератором Радиуса Границы?
Используйте ползунки или числовые поля для независимой настройки каждого угла. Предпросмотр обновляется мгновенно, а сгенерированный CSS-код можно скопировать одним кликом.
Можно ли задать разные значения для каждого угла?
Да. Отключите опцию «Связать все углы», чтобы управлять каждым углом (верхний левый, верхний правый, нижний правый, нижний левый) независимо для асимметричных форм.
В чём разница между сокращённой и полной записью CSS?
Сокращённое свойство border-radius задаёт все четыре угла одновременно. Полные свойства (border-top-left-radius и др.) задают каждый угол отдельно.
Как сделать круг с помощью CSS border-radius?
Задайте border-radius равным 50% для квадратного элемента. Используйте пресет «Круг», чтобы применить это мгновенно.
Как сделать форму капсулы/таблетки?
Задайте border-radius очень большое значение (например, 9999px). Используйте пресет «Таблетка» для применения одним кликом.
Поддерживает ли border-radius процентные значения?
Да. Процентные значения относятся к размерам элемента: 50% создаёт круглую форму для квадратного элемента. Инструмент поддерживает единицы px и %.
Что означают два значения в сокращённой записи border-radius?
При двух значениях первое применяется к верхнему левому и нижнему правому углам, второе — к верхнему правому и нижнему левому.
Совместим ли сгенерированный CSS со всеми браузерами?
Да. Свойство border-radius поддерживается во всех современных браузерах и Internet Explorer 9+.
Можно ли просмотреть форму с цветом фона?
Да. Предпросмотр отображает форму с настраиваемым цветом фона, чтобы вы точно видели, как будут выглядеть скруглённые углы.
Как сбросить значения по умолчанию?
Нажмите кнопку «Сбросить», чтобы восстановить все углы до 8px — стандартного значения большинства UI-фреймворков.
Какие пресеты доступны?
Инструмент включает пресеты для распространённых форм: Квадрат (0px), Небольшое (4px), Скруглённый (8px), Сильно скруглённый (16px), Таблетка (9999px) и Круг (50%).