Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Estilo de Borda CSS — Bordas em Zigue-zague, Onduladas e Onduladas

Gere bordas decorativas em CSS — em zigue-zague, onduladas ou onduladas — que o border-radius simples não consegue produzir, com estilo, tamanho e profundidade independentes por lado (superior/direito/inferior/esquerdo) via mask-image e gradientes repetidos.

Entrada

Cores

Borda superior

Largura de uma repetição — um ciclo completo de pico a pico, em pixels.

Até que ponto a onda/dente/ondulação alcança a partir da borda plana, em pixels.

Borda direita

Borda inferior

Largura de uma repetição — um ciclo completo de pico a pico, em pixels.

Até que ponto a onda/dente/ondulação alcança a partir da borda plana, em pixels.

Borda esquerda

Saída

As regras geradas são limitadas a esta classe, para que não colidam com seus próprios estilos.

Saída

Seu estilo de borda aparecerá aqui.

CSS
Trecho HTML

Corresponde à pré-visualização acima — combine com o bloco CSS.

Marcação de pré-visualização (estilos embutidos)
Isso foi útil?

Mais formas de usar esta ferramenta

API REST

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"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

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

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/css-border-style-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Estilo de Borda CSS — Bordas em Zigue-zague, Onduladas e Onduladas — 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>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

O que esta ferramenta faz

border e border-radius simples podem apenas desenhar linhas retas e cantos arredondados — eles não conseguem colocar um zigue-zague de papel rasgado ao longo do topo de um cartão, uma linha ondulada sob um banner ou uma borda "poço de bilhete" ondulada em um cupom. Esta ferramenta constrói essas bordas decorativas em CSS puro, usando mask-image (com padrões de linear-gradient/radial-gradient repetidos) para cortar uma forma de onda em uma tira colorida fina em cada lado de uma caixa — sem arquivo de imagem, sem SVG, sem JavaScript.

Cada lado — superior, direito, inferior, esquerdo — alterna independentemente e recebe seu próprio estilo (Zigue-zague, Ondulado ou Ondulado), além de seu próprio Tamanho (a largura de uma repetição) e Amplitude (até que ponto a onda alcança). Misturar estilos por lado é o que torna uma aparência de poço de bilhete (topo ondulado, lados retos) ou uma aparência de caderno rasgado (apenas zigue-zague superior e inferior) possível.

Como usar

  1. Defina o Fundo da caixa e a Cor da borda.
  2. Para cada lado que você deseja decorar, ative-o e escolha um estilo:
    • Zigue-zague — dentes triangulares nítidos, como uma borda rasgada ou uma borda de bandeira de flâmula.
    • Ondulado — o mesmo ritmo de pico/vale que zigue-zague, mas arredondado em uma curva S suave.
    • Ondulado — uma fileira de saliências redondas uniformes, todas se curvando da mesma maneira — uma aparência de borda de perfuração de carimbo ou renda.
  3. Ajuste Tamanho (espaçamento entre picos) e Amplitude (até que ponto a onda alcança) por lado.
  4. Copie o CSS e o trecho HTML — o trecho é um invólucro <div> mais um <div> filho por lado ativado; o CSS mascara cada filho no formato de onda escolhido.

Por que mask-image em vez de border-image ou clip-path

Um border-image é uma imagem de origem de 9 fatias aplicada em torno de toda a caixa de uma vez, portanto todos os quatro lados são forçados em variações da mesma imagem — não há como dar ao topo um zigue-zague e à esquerda uma borda simples. clip-path pode cortar o contorno inteiro da caixa em uma forma, mas não um lado isoladamente enquanto os outros permanecem retos. Mascarar uma tira overlay independente por lado é o que torna cada borda ativável e configurável independentemente.

Suporte do navegador

mask-image não tem prefixo em todos os navegadores atuais; o CSS também fornece os equivalentes -webkit-mask-* ao lado dele para mecanismos WebKit mais antigos que apenas reconheciam o formato com prefixo.

FAQ

Posso arredondar os cantos reais da caixa também? Sim — adicione seu próprio border-radius ao <div> envolvente (a classe de estilo .io-border-box que esta ferramenta gera); as tiras de borda ainda mascararam corretamente, pois são camadas overlay independentes, embora um raio grande possa precisar que os cantos da tira própria sejam facilitados manualmente para uma junção perfeitamente limpa. Para cantos arredondados simples sem nenhuma onda, use o Gerador de Raio de Borda em seu lugar.

Como isso é diferente de uma sombra ou uma forma recortada? Um Gerador de Sombra de Caixa CSS suaviza as bordas de uma caixa com um desfoque, não um padrão de onda repetido. Um Gerador de Clip-Path CSS recorta toda a caixa em uma forma fixa (um círculo, uma estrela, um polígono) em vez de decorar um lado enquanto deixa o restante da caixa retangular.

Por que a onda às vezes corta até a borda externa da caixa? Esse é o "vale" do padrão — no ponto médio entre dois picos, a máscara da tira se torna totalmente transparente, expondo a cor de fundo da caixa em si. É intencional: é o que torna a borda legível como um zigue-zague/onda/ondulação genuína em vez de uma linha reta com saliências nela.

Privacidade

Tudo funciona em seu navegador. Suas cores e configurações nunca são enviadas para um servidor — o CSS e a pré-visualização são atualizados localmente conforme você ajusta os controles.

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

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios