Gerador de 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.
Veja
Copie o código
.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
maskrecorta tudo junto.
Leia no blog
Outras ferramentas
Playground de corner-shape
Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.
FormasCalculadora de raios aninhados
Calcule o raio de dentro a partir do raio de fora, do padding e da borda, para cantos concêntricos.
FormasGerador de divisores de seção
Passagens em diagonal, seta, curva, onda, zigue-zague ou rasgado entre duas seções, com o encaixe da seção vizinha pronto.