# Gerador de bordas onduladas

> Onda, zigue-zague, festonado, côncavo, serrilhado e ameias na borda de qualquer elemento com mask, no tamanho que você quiser.

URL: https://dpw.dev/ferramentas/bordas-onduladas/

Escolha a forma, a borda e o tamanho: o gerador recorta onda, zigue-zague, festonado, côncavo, serrilhado ou ameias num lado, em cima e embaixo ou em volta toda do elemento, com `mask`, sem SVG nem imagem.

Esta página tem um gerador interativo no navegador. Exemplo: onda de 20px na borda de baixo:

```css
.element {
  /* Onda embaixo. */
  mask:
    radial-gradient(21.54px at 50% calc(100% - 28px), #000 99%, #0000 101%) calc(50% - 40px) 0 / 80px 100%,
    radial-gradient(21.54px at 50% calc(100% + 8px), #0000 99%, #000 101%) 50% -20px / 80px 100% repeat-x;
  /* O recorte não empurra o conteúdo: o padding o tira da faixa recortada. */
  padding-block-end: calc(1rem + 34px);
}
```

## O problema

Borda ondulada costumava vir de um SVG ou de uma imagem posta por cima do elemento. Ela não acompanha a cor do fundo sem editar o arquivo, não muda de tamanho com uma variável e ainda precisa ficar alinhada à mão.

Fazer o mesmo só com CSS é possível, mas as contas dos gradientes que desenham a onda (raios, centros e deslocamentos) desanimam qualquer um.

## Como funciona

A `mask` mostra o elemento onde a camada é opaca e esconde onde ela é transparente. Gradientes repetidos ao longo da borda desenham o recorte:

`mask: radial-gradient(…) 50% / 80px 100% repeat-x`

A onda junta duas fileiras de círculos de mesmo raio: uma mostra o elemento e a outra esconde, com os centros deslocados meia onda. Os arcos se encontram a meio caminho e a curva sai contínua. O zigue-zague é um `conic-gradient()` de 90° repetido; o festonado, círculos sobre uma faixa reta, e o côncavo, o contrário, círculos tirados da caixa. Serrilhado e ameias são `linear-gradient()` que deixam opaca metade de cada ladrilho: na diagonal ou ao meio.

A técnica é a de Temani Afif: os números saem da conta, e o gerador os escreve em px para você não precisar fazê-la. A suavidade afasta os centros dos círculos da borda, o que aumenta o raio e achata a onda.

Em mais de um lado, as formas que tiram pedaço da caixa (zigue-zague, côncavo) põem uma camada por lado e as cruzam com `mask-composite: intersect`: só fica o que todas mostram. As que põem pedaço para fora (festonado, serrilhado, ameias) encolhem a caixa em todos os lados recortados e somam a ela os dentes de cada um. A onda fica num lado só, porque mistura camadas que mostram e que escondem.

Nos vários lados, `mask-repeat: round` ajusta o dente para caber um número inteiro em cada lado, e os cantos fecham. Em troca, o tamanho real varia um pouco em volta do escolhido.

O recorte não empurra o conteúdo: o que cai na faixa recortada some junto. Por isso o código traz o padding de cada lado recortado: a profundidade do recorte mais 1rem de respiro.

## Quando usar

- Cards, banners e etiquetas com uma borda decorativa que muda de cor com o resto do tema.
- Ingressos, cupons e recibos serrilhados em cima e embaixo, e selos com o picote côncavo em volta toda.
- Faixas e rodapés com onda, sem SVG para manter.
- Recortes em elementos com imagem ou gradiente de fundo: a `mask` recorta tudo junto.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/masks)).

## Leia no blog

- [CSS mask-image: mascaramento CSS nativo](https://dpw.dev/css/css-mask-image/)

## Conceitos Fundamentais de CSS

Gradiente no CSS é imagem: por isso ele cabe em `mask`, `background` e `border-image`, com tamanho, posição e repetição. O livro explica esse modelo em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml