A nova propriedade CSS border-shape

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!

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.

.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.

.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.

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:

.shape {
  border: 8px solid red;
  border-shape: /* código da sua forma */;
}

Sem mais hacks e sem mais dores de cabeça!

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:

.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:

Direto da especificação:

A propriedade border-shape aceita um único <basic-shape> ou dois <basic-shape>s:

Um único <basic-shape> (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 <basic-shape>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!

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.

Veja mais alguns exemplos com o valor de duas formas antes de seguir para a próxima parte:

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:

.box {
  border-shape: inset(0) circle();
  border-color: pink;
}

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.

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:

.box {
  border-shape: inset(0 -100px) circle(50px);
  border-color: pink;
}

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)!

.box {
  border-shape: inset(0 -100vw) circle(0);
  border-color: pink;
}

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:

Decorações parciais

Vamos aproveitar aquela última demonstração para experimentar decorações diferentes.

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:

Legal, não? Também dá para aplicar isso a elementos de imagem:

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()”).

Basta pegar o mesmo código, trocar clip-path por border-shape e tcharam!

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:

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!

E que tal uma moldura elétrica ao redor do conteúdo?

E um loader chique feito só com borda? (código retirado da coleção de loaders squishy)

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:

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.