Генератор CSS-рамки

Настройте толщину, стиль, цвет и скругление CSS-рамки — равномерно или по сторонам — с предпросмотром в реальном времени, затем скопируйте готовый код. Обработка 100% локально — ничего не отправляется на сервер.

Пример:

Одинаковая толщина со всех 4 сторон

Толщина (px)

Стиль

Цвет

Радиус (px)

CSS-код

border: 3px solid #2563eb;
border-radius: 8px;

Как это работает

CSS-рамка сочетает три параметра: толщину, стиль линии и цвет, со скруглением через border-radius. Этот инструмент позволяет задавать эти значения равномерно для всех четырёх сторон или независимо для каждой стороны, с мгновенным визуальным результатом для проверки эффекта перед копированием кода.

В чём разница между "groove", "ridge", "inset" и "outset"?

Эти четыре стиля имитируют объёмный 3D-эффект на основе выбранного цвета: "groove" создаёт впечатление выдолбленной канавки, "ridge" — приподнятого гребня, "inset" — вдавленной рамки, а "outset" — выступающей рамки; точное отображение зависит от браузера и используемого фонового цвета.

Почему разделять толщину по сторонам, а не использовать сокращение "border"?

Сокращение border не позволяет задать разную толщину для каждой стороны; для асимметричного эффекта (толстая рамка сверху, тонкая по бокам) нужно использовать детальные свойства border-top-width, border-right-width и т. д., как это делает данный инструмент, когда отключена опция «одинаковая толщина».

Никакие данные не передаются на сервер: предпросмотр и код генерируются прямо в вашем браузере.