Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор стилей границ CSS — Зубчатые, волнистые и волнообразные края

Создавайте декоративные границы CSS — зубчатые, волнистые или волнообразные — которые не может создать обычный border-radius, с независимым стилем, размером и глубиной для каждой стороны (верхняя/правая/нижняя/левая) через mask-image и повторяющиеся градиенты.

Ввод

Цвета

Верхняя граница

Ширина одного повтора — один полный цикл пик-пик, в пикселях.

Насколько далеко волна/зуб/волна доходит от прямого края, в пикселях.

Правая граница

Нижняя граница

Ширина одного повтора — один полный цикл пик-пик, в пикселях.

Насколько далеко волна/зуб/волна доходит от прямого края, в пикселях.

Левая граница

Вывод

Созданные правила ограничены этим классом, поэтому они не будут конфликтовать с вашими собственными стилями.

Вывод

Ваш стиль границы появится здесь.

CSS
Фрагмент HTML

Соответствует предпросмотру выше — объедините с блоком CSS.

Разметка предпросмотра (встроенные стили)
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-border-style-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "bgColor": "#ffffff",
    "edgeColor": "#6366f1",
    "topEnabled": "true",
    "topStyle": "zigzag",
    "topSize": "24",
    "topAmplitude": "12",
    "rightEnabled": "",
    "rightStyle": "wavy",
    "rightSize": "24",
    "rightAmplitude": "12",
    "bottomEnabled": "true",
    "bottomStyle": "zigzag",
    "bottomSize": "24",
    "bottomAmplitude": "12",
    "leftEnabled": "",
    "leftStyle": "wavy",
    "leftSize": "24",
    "leftAmplitude": "12",
    "className": "io-border-box"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-border-style-generator` tool (CSS Border Style Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-border-style-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор стилей границ CSS — Зубчатые, волнистые и волнообразные края — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Что делает этот инструмент

Обычные border и border-radius могут только рисовать прямые линии и скругленные углы — они не могут создать зубчатый край разорванной бумаги вдоль верхней части карточки, волнистую линию под баннером или волнообразный край "билета" на купоне. Этот инструмент создает такие декоративные границы на чистом CSS, используя mask-image (с повторяющимися паттернами linear-gradient/radial-gradient) для вырезания волнообразной формы в тонкую цветную полоску на каждой стороне коробки — без файла изображения, без SVG, без JavaScript.

Каждая сторона — верхняя, правая, нижняя, левая — переключается независимо и получает свой собственный стиль (Зубчатый, Волнистый или Волнообразный), а также свой Размер (ширина одного повтора) и Амплитуду (насколько глубоко доходит волна). Смешивание стилей для разных сторон — это то, что делает возможным внешний вид билета (волнообразный верх, прямые стороны) или внешний вид разорванной тетради (только зубчатые верх и низ).

Как использовать

  1. Установите Фон коробки и Цвет границы.
  2. Для каждой стороны, которую вы хотите украсить, включите её и выберите стиль:
    • Зубчатый — острые треугольные зубья, как разорванный край или граница флажка.
    • Волнистый — тот же ритм пик-впадина, что и зубчатый, но скруглённый в плавную S-образную кривую.
    • Волнообразный — ряд однородных круглых выпуклостей, все изгибающихся в одну сторону — внешний вид края с перфорацией марки или кружевного края.
  3. Отрегулируйте Размер (расстояние между пиками) и Амплитуду (насколько далеко доходит волна) для каждой стороны.
  4. Скопируйте CSS и фрагмент HTML — фрагмент представляет собой обёртку <div> плюс один дочерний <div> для каждой включённой стороны; CSS маскирует каждого потомка в выбранную волну.

Почему mask-image вместо border-image или clip-path

border-image — это один источник изображения 9-slice, применяемый вокруг всей коробки сразу, поэтому все четыре стороны вынуждены быть вариациями одного изображения — нет способа дать верхней стороне зубчатый край, а левой стороне простой край. clip-path может вырезать весь контур коробки в одну форму, но не один край в изоляции, пока остальные остаются прямыми. Маскирование независимой накладываемой полосы для каждой стороны — это то, что делает каждый край переключаемым и независимо настраиваемым.

Поддержка браузерами

mask-image не имеет префикса во всех современных браузерах; CSS также включает эквивалентные -webkit-mask-* вариант для более старых движков WebKit, которые поддерживали только версию с префиксом.

FAQ

Могу ли я также скруглить углы самой коробки? Да — добавьте свой собственный border-radius к обёрнутому <div> (класс .io-border-box, который создаёт этот инструмент); границы-полосы по-прежнему маскируются правильно, поскольку это независимые слои-накладки, хотя большой радиус может потребовать ручной настройки углов самой полосы для идеально чистого соединения. Для простых скруглённых углов без волн используйте вместо этого Генератор радиуса границы.

Чем это отличается от тени или отсечённой формы? Генератор тени коробки CSS смягчает края коробки размытием, а не повторяющимся волнообразным паттерном. Генератор Clip-Path CSS вырезает всю коробку в одну фиксированную форму (круг, звезду, многоугольник) вместо украшения одного края, пока остальная часть коробки остаётся прямоугольной.

Почему волна иногда доходит до внешнего края коробки? Это «впадина» паттерна — в середине между двумя пиками маска полосы становится полностью прозрачной, открывая собственный фоновый цвет коробки под ней. Это намеренно: это то, что делает край заметным как настоящий зубчатый/волнистый/волнообразный край, а не как прямую линию с выпуклостями.

Конфиденциальность

Всё работает в вашем браузере. Ваши цвета и настройки никогда не отправляются на сервер — CSS и предпросмотр обновляются локально по мере того, как вы регулируете элементы управления.

zigzag borderwavy borderscalloped bordertorn edgeticket edge cssstamp edgejagged bordercss maskdecorative borderweb design

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу