Генератор CSS border-radius
Визуально создавайте сложные значения border-radius в CSS. Независимое управление каждым углом.
border-radius: 20px 20px 20px 20px;
Как пользоваться этим инструментом
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Что такое генератор CSS border-radius?
Свойство CSS border-radius принимает до четырёх значений, по одному на угол, в порядке: верхний левый, верхний правый, нижний правый и нижний левый. Сочетайте разные радиусы для органических форм-капель, асимметричных карточек или стилей речевых пузырей. Этот инструмент позволяет настраивать каждый угол ползунками и видеть результат в реальном времени.
Типичные сценарии использования
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Часто задаваемые вопросы
А как насчёт эллиптических радиусов?▼
Похожие инструменты
Конвертер цвета (HEX/RGB/HSL)
Преобразует цвета между форматами HEX, RGB и HSL. Выберите цвет визуально или введите значения вручную.
Генератор CSS box-shadow
Визуально создавайте значения box-shadow в CSS. Предпросмотр в реальном времени и копирование сгенерированного CSS.
Генератор CSS-градиентов
Создавайте линейные и радиальные CSS-градиенты. Выбирайте цвета визуально и копируйте сгенерированный CSS.
Генератор кривых ускорения cubic-bezier
Создаёт кривые ускорения cubic-bezier для CSS. Включает стандартные предустановки.
Генератор цветовых палитр
Генерирует гармоничные цветовые палитры на основе любого базового цвета. Поддерживает комплементарные, аналоговые, триадические и монохроматические схемы.
Генератор CSS clamp()
Генерирует плавные адаптивные значения CSS с помощью clamp(). Плавно масштабируется между минимальным и максимальным размерами в пределах диапазонов области просмотра.