Como usar: Gerador de Borda Zigzag CSS
- A prévia começa com uma borda inferior zigzag; ajuste o número de dentes com Repetições.
- Escolha Festões para dentes arredondados ou Degraus para um formato de escada.
- Escolha Ambas para um visual de recibo ou ingresso.
- Copie o CSS.
Bordas zigzag com clip-path
Cada dente é formado por dois pontos do polígono: um na borda e outro recuado pela profundidade do dente. Como as posições x são percentuais, os dentes sempre ocupam a largura toda; defina a profundidade em px para que mantenham a altura. Para um visual de recibo, recorte as duas bordas com uma profundidade pequena e muitas repetições.
Mais formatos de borda estão no Gerador de Divisores de Seção.
Também pesquisado como: borda zigzag css, borda zigzag em css, borda serrilhada css, borda dente de serra css, borda festonada css, borda de recibo css, borda de ingresso css.
Ferramentas que combinam com: Gerador de Borda Zigzag CSS
- Seção Angulada CSS — Crie seções angulares, inclinadas ou diagonais — aquele visual clássico de landing page — com uma única regra de clip-path.
- Divisor Curvo de Seção — Arredonde a borda de um hero ou seção com uma curva — convexa, côncava, um ângulo curvo, uma onda suave ou festões — usando apenas CSS.
- Gerador de Triângulo CSS — Crie um triângulo só com CSS para a seta de um tooltip, o caret de um dropdown ou um balão de fala: escolha uma das 8 direções, a largura, a altura e a cor, e copie o truque do border clássico ou a versão mais simples com clip-path.
- Gerador de Clip-path CSS — Recorte imagens e elementos em qualquer formato: escolha uma das 15 formas iniciais — triângulo, hexágono, estrela, seta, chevron, balão de fala, círculo, elipse, retângulo arredondado… — e depois arraste os pontos sobre um exemplo ou sobre a sua própria imagem.
Perguntas frequentes
Como faço uma borda zigzag em CSS?
Use clip-path: polygon() com pontos que alternam entre a borda e a profundidade do corte ao longo da largura. Escolha Zigzag aqui, defina as repetições e copie o CSS.
Dá para fazer uma borda de recibo rasgado?
Sim — escolha Zigzag, a borda Ambas, uma profundidade pequena (8–12 px) e 20 ou mais repetições.
Como manter os dentes do mesmo tamanho em telas grandes?
A quantidade de dentes é fixa, então eles ficam mais largos em telas grandes. Para uma largura fixa de dente, use uma máscara repetida com conic-gradient, ou aumente a quantidade para desktop em uma media query.
Posso instalar o Gerador de Borda Zigzag CSS como um aplicativo da web e usá-lo offline?
Sim. O Gerador de Borda Zigzag CSS é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.