# A nova propriedade CSS border-shape
> Conheça a propriedade CSS border-shape para criar formas, bordas que seguem o contorno, decorações e animações que clip-path e mask não conseguem.
URL: https://dpw.dev/css/css-border-shape/
Publicado em: 2026-07-20
Categoria: css
Tags: interface
Autor: Tárcio Zemel
Recentemente, fomos brindados com a nova função `shape()` de CSS, além da propriedade `corner-shape`. Para os que pensavam que não seria preciso mais recursos para criar formas em CSS, vem aí a propriedade `border-shape`!
> Artigo baseado em [Get Ready For the Powerful CSS border-shape Property!](https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/).
`shape()`, `corner-shape`, `border-shape`... De onde saiu tudo isso?
Quem não é fanático por formas em CSS provavelmente deixou esses recursos passarem quando surgiram. Então, vale uma introdução rápida e formal a cada um deles, começando por…
## `shape()` e `corner-shape`
A função shape() é um novo valor para clip-path e offset-path que usa a sintaxe do SVG para criar formas em CSS de maneira muito mais fácil do que, digamos, `path()`.
Há uma série de 4 artigos no CSS Tricks explorando esse recurso e ainda outro artigo dedicado à criação de formas complexas.
Falando em SVG, é possível expressar qualquer forma SVG usando `shape()`. Dito de outro modo, dá para _converter_ qualquer forma SVG em uma forma CSS, existindo até um conversor que faz exatamente isso.
Já a `corner-shape` é uma propriedade que funciona em conjunto com a border-radius. Como o nome sugere, ela permite controlar o formato dos cantos de um elemento usando palavras-chave predefinidas.
```css
.corner {
border-radius: 20px;
corner-shape: round | scoop | bevel | notch | squircle;
}
```
Ela também pode ser usada para criar formas comuns em CSS, como detalhado no artigo "CSS Shapes using `corner-shape`".
Mas será que a propriedade `corner-shape` é realmente útil ou mesmo necessária? Com exceção do valor `squircle`, a maioria das formas já pode ser criada com `clip-path` ou `mask`, só que o que a `corner-shape` faz e as outras não conseguem é adicionar bordas e outras decorações a essas formas com facilidade!
A `corner-shape` não apenas molda os cantos: ela também tem suporte a outras propriedades, como border e box-shadow, permitindo que elas sigam a forma em vez da caixa do elemento. Isso muda o jogo, porque todo mundo sabe que adicionar bordas a formas é um pesadelo.
O suporte ainda não é dos melhores (apenas navegadores Chromium até o momento em que este artigo foi escrito), mas é uma boa hora para explorar a propriedade e ter uma visão geral do seu potencial.
## Apresentando a `border-shape`
Moldar os cantos é ótimo, mas ainda é bem limitado em relação ao que dá para fazer. E que tal moldar o elemento inteiro?
É isso que a `border-shape` faz. Ela aceita os mesmos valores da `clip-path`, incluindo a nova função `shape()`.
Então, ela faz o mesmo trabalho da `clip-path`? O que muda?
Assim como acontece com a `corner-shape`, a maioria das propriedades decorativas (como `border`, `box-shadow` e `outline`) seguem a forma.
A `clip-path` (e a `mask`) recorta/mascara o elemento inteiro, incluindo as decorações, então ter bordas é um grande _NÃO_.
Esse é um problema sério na criação de formas em CSS.
A propriedade `border-shape` chega para resolver isso. Em vez de recortar o elemento, ela "molda" o elemento, permitindo que suas decorações sigam essa forma.
Em outras palavras, colocar bordas em formas CSS vai virar brincadeira de criança!
Sem falar que a `border-shape` também é muito fácil de usar. Quem já conhece a `clip-path` praticamente não tem nada novo para aprender. Basta trocar uma propriedade pela outra e pronto.
```css
.shape {
/* Código antigo */
clip-path: shape() | polygon() | ...;
/* Código novo */
border-shape: shape() | polygon() | ...;
}
```
Vale reforçar o convite para conhecer melhor a função `shape()`, porque é o valor que torna a `border-shape` realmente poderosa. As duas realmente andam de mãos dadas.
Agora que o uso básico da propriedade está claro, que tal partir para a parte divertida? A proposta aqui é forçar os limites e mostrar o que é possível fazer com a `border-shape`.
> **Nota:** **Nota:** O suporte está limitado apenas ao Chrome na data de publicação deste artigo, então, confira as próximas demonstrações usando o Chrome.
## Formas só com borda
Como já dito, a primeira grande vantagem aqui é adicionar bordas que acompanham o contorno real da forma, o que também significa a possibilidade de criar formas só com borda.
Basta escrever o seguinte código:
```css
.shape {
border: 8px solid red;
border-shape: /* código da sua forma */;
}
```
Sem mais hacks e sem mais dores de cabeça!
[Exemplo no CodePen](https://codepen.io/anon/pen/myOpBpX/e90357a6ccd70121313a49ab41c37dc3)
A maioria das formas já está disponível na coleção CSS Shapes, então, na prática, criar formas só com borda é algo que dá para fazer com um simples copiar/colar.
Alguns dos geradores online já estão inclusive configurados para fornecer versões só com borda de formas complexas, como blobs, linhas onduladas e molduras elaboradas, entre muitas e muitas outras.
## Formas vazadas (cutout)
Vamos pegar o código anterior e atualizá-lo assim:
```css
.shape {
border: 8px solid red;
border-shape: inset(0) /* código da sua forma */;
}
```
Mantém-se o código da forma que já existia e adiciona-se inset(0) no início. Isso mesmo: é possível ter dois valores de forma dentro de `border-shape`, e o resultado é o seguinte:
[Exemplo no CodePen](https://codepen.io/anon/pen/QwGaqBP/08c7d871cd5de941605ba89f8d5558ed)
Direto da especificação:
A propriedade `border-shape` aceita um único `` ou dois ``s:
**Um único `` (modo Stroke):** a borda é renderizada como um traço ao longo do caminho da forma, com a largura do traço determinada pela largura de borda computada do lado correspondente. Esse modo é útil para criar formas contornadas.
**Dois ``s (modo Fill):** a borda é renderizada como a área entre os dois caminhos. A primeira forma define o limite externo e a segunda forma define o limite interno. Esse modo oferece controle preciso sobre a geometria da região da borda.
Usando um retângulo básico como forma externa (`inset(0)`), foi possível transformar facilmente a versão só com borda em uma versão vazada!
Quer a forma dentro de um círculo? Fácil!
[Exemplo no CodePen](https://codepen.io/anon/pen/LEbezMj/7433780c96c4a18f40baa1967ad4b980)
Tudo o que foi feito foi trocar `inset(0)` (um retângulo) por `circle()` (um círculo).
Mas dá para fazer isso com um simples `border-radius: 50%`, certo?
Não! Ao trabalhar com `border-shape`, a `border-radius` é ignorada, o que é até lógico, já que não há mais cantos para arredondar (agora o elemento está moldado).
Isso não é problema, porque dá para criar literalmente qualquer tipo de forma que substitua o uso da `border-radius`, como mostra o exemplo anterior.
> **Nota:** **Nota:** Se ficou a dúvida sobre por que `circle()` está sendo usada sem nenhum argumento, confira o artigo "Funções CSS que funcionam sem argumentos".
Veja mais alguns exemplos com o valor de duas formas antes de seguir para a próxima parte:
[Exemplo no CodePen](https://codepen.io/anon/pen/myOpqKY/0ae06ea7e647c0a7d6238d728e8a2584)
Dá para usar literalmente qualquer combinação para obter formas de aparência complexa sem muito esforço!
## Decorações que rompem os limites (breakout)
Agora vamos pegar um bloco de texto e aplicar o código anterior com os dois valores de forma:
```css
.box {
border-shape: inset(0) circle();
border-color: pink;
}
```
[Exemplo no CodePen](https://codepen.io/anon/pen/JobMOaB/d7e5dcb366523a4e0484ef4a50b5aac8)
Talvez isso não surpreenda, considerando o que já foi visto até aqui. Definimos duas formas e a borda é desenhada na área entre elas. A novidade é que agora estamos lidando com conteúdo e, como dá para ver, ele se sobrepõe à borda.
A `border-shape` molda o elemento _inteiro_, incluindo a decoração do elemento, mas todo o conteúdo interno permanece inalterado e segue a forma retangular inicial.
Esse comportamento não é novidade, já que o mesmo acontece até com a clássica `border-radius`. E o conteúdo vai transbordar, a menos que se decida escondê-lo com `overflow: hidden`.
[Exemplo no CodePen](https://codepen.io/anon/pen/vEydBQW/a19a3abf94277f25bc86cdb810859034)
Neste caso, a propriedade `overflow` não será usada, pois a intenção é que o conteúdo transborde e fique por cima da decoração da borda.
Agora vamos atualizar o código da forma assim:
```css
.box {
border-shape: inset(0 -100px) circle(50px);
border-color: pink;
}
```
[Exemplo no CodePen](https://codepen.io/anon/pen/ogYpoQQ/0a4234c433fd23d78fc07b9bf232f79b)
O círculo foi reduzido e o retângulo, ampliado. Percebe aonde isso leva? Ao deixar o raio do círculo em `0` e o retângulo maior, cria-se um efeito de fundo que rompe os limites (breakout)!
```css
.box {
border-shape: inset(0 -100vw) circle(0);
border-color: pink;
}
```
[Exemplo no CodePen](https://codepen.io/anon/pen/jEVYaXV/de8cc0ac037c351f0d2c7bd358334380)
O elemento permanece centralizado, mas seu fundo (que estamos simulando com uma borda!) se estende até a borda da tela.
E isso não se limita ao uso de dois valores de forma. Mesmo com um único valor de forma, dá para conseguir uma decoração breakout (o que costuma ser difícil) ao considerar qualquer valor que ultrapasse os limites do elemento.
Aqui está uma demonstração com vários exemplos para explorar:
[Exemplo no CodePen](https://codepen.io/anon/pen/XJNJRLw/81b35ba88e6ef15b521ef04259aa69a5)
## Decorações parciais
Vamos aproveitar aquela última demonstração para experimentar decorações diferentes.
[Exemplo no CodePen](https://codepen.io/anon/pen/NPbXXWb/5940b118b0f317344f7c8ee6c4d76dd8)
Desta vez, em vez de ultrapassar o limite do elemento, ficamos dentro dele para criar decorações parciais. Em outras palavras, não há mais limites. A `border-shape` não tem limite. O único limite é a imaginação!
Aqui, o recurso principal para criar a decoração é a função `shape()`. Então faça um favor a si mesmo e explore esse recurso lendo a série de quatro artigos! Dominando a `shape()`, fica fácil produzir decorações complexas com a `border-shape`.
## Animação de formas
Sim, a `border-shape` pode ser animada, e dá para ter diferentes tipos de animação. Com a sintaxe de dois valores, podemos animar o valor de `border-width` para criar um efeito de revelação (reveal):
Passe o cursor sobre o exemplo abaixo e veja o resultado:
[Exemplo no CodePen](https://codepen.io/anon/pen/qEqpYmG/7bd756d1608487b94007070da97b2cab)
Legal, não? Também dá para aplicar isso a elementos de imagem:
[Exemplo no CodePen](https://codepen.io/anon/pen/WbodJdZ/8d63aded6f3f1745feeb61f7432de70e)
Também é possível animar os valores das formas para criar animações mais complexas. Aqui está uma demonstração de um efeito de hover com quique (bounce) aplicado a formas de blob (do artigo "Making Complex CSS Shapes Using `shape()`").
[Exemplo no CodePen](https://codepen.io/anon/pen/yyyPONb)
Basta pegar o mesmo código, trocar `clip-path` por `border-shape` e _tcharam_!
[Exemplo no CodePen](https://codepen.io/anon/pen/GgNyddj/3f67b71f0946ba4f941d9ba5defc9c0b)
E por que não adicionar uma animação sutil àquelas decorações anteriores? Passe o cursor sobre os títulos e o texto para ver o que acontece:
[Exemplo no CodePen](https://codepen.io/anon/pen/GgNyBmz/a497397c4ba86e88114ceed208c1ca43)
## Quer mais? Então vamos lá!
Aqui está um sublinhado desenhado à mão que desliza entre os itens do menu ao passar o cursor. Linhas retas são chatas!
[Exemplo no CodePen](https://codepen.io/anon/pen/emdoVae)
E que tal uma moldura elétrica ao redor do conteúdo?
[Exemplo no CodePen](https://codepen.io/anon/pen/LEbPJow/dd6ad605878e5341d8d9163ed8fbad5f)
E um loader chique feito só com borda? (código retirado da coleção de loaders squishy)
[Exemplo no CodePen](https://codepen.io/anon/pen/YPpYLvy/3bca6c53256887740497dbfd09633b60)
Vamos conectar círculos com uma linha reta que se curva quando os círculos se aproximam e se estica quando se afastam. Arraste os círculos na demonstração abaixo e veja a mágica acontecer:
[Exemplo no CodePen](https://codepen.io/anon/pen/yyVPKzb)
## Conclusão
Agora deve estar claro por que essa nova propriedade é chamada de "poderosa". Além de facilitar a criação de formas em CSS, ela permite adicionar decorações elaboradas, animações bacanas e muito mais!
As demonstrações não foram detalhadas a fundo, já que a intenção foi manter este um artigo leve, mostrando o potencial da `border-shape`. Agora que já se sabe que dá para criar coisas malucas com ela, fique de olho em artigos mais elaborados!
Não deixe de favoritar a coleção CSS Shapes e os geradores online. Muitas das formas já foram atualizadas usando `shape()`, e a versão com `border-shape` também está em processo de inclusão.
---
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