Playground de corner-shape
Escolha o formato e o tamanho do canto: a prévia aplica o corner-shape de verdade e o código sai com o border-radius que ele precisa.
Veja
Seu navegador ainda não aplica corner-shape. A prévia mostra o border-radius
comum, que é o que esses navegadores vão exibir.
Tracejado: o mesmo raio com round.
Copie o código
.element {
background: #ffd600;
border-radius: 48px;
corner-shape: squircle;
}
/* Sem suporte, fica o canto arredondado do border-radius. */O problema
O border-radius só desenha um tipo de canto: um arco de círculo ou de elipse. Para o squircle dos ícones de celular, o chanfro de uma etiqueta ou o recorte de um ingresso, a saída era SVG, clip-path ou mask, e aí a borda e a sombra deixavam de acompanhar a forma.
O corner-shape resolve isso no lugar certo: muda a curva do canto, e a borda, o fundo e a sombra seguem junto.
Como funciona
O border-radius continua decidindo o tamanho do canto, e o corner-shape decide o formato da curva dentro dessa área. Sem raio, não há canto para moldar.
corner-shape: superellipse(k) Todas as palavras-chave são atalhos para uma superelipse. O k é a curvatura: 1 é o arco de sempre, valores maiores inflam o canto e negativos cavam.
A propriedade aceita até quatro valores, na ordem do border-radius: superior esquerdo, superior direito, inferior direito e inferior esquerdo. Com dois valores, o primeiro vale para o canto superior esquerdo e o inferior direito.
Navegador sem suporte ignora a declaração e desenha o border-radius comum. Por isso o recurso já pode entrar como melhoria progressiva, desde que o canto arredondado sirva de fallback.
As palavras-chave lado a lado
| Palavra-chave | Equivale a | Formato |
|---|---|---|
| round | superellipse(1) | Arco de círculo, o canto de sempre |
| squircle | superellipse(2) | Curva contínua, entre o arco e o quadrado |
| bevel | superellipse(0) | Chanfro reto, na diagonal |
| scoop | superellipse(-1) | Arco côncavo, cavado para dentro |
| notch | superellipse(-infinity) | Degrau em ângulo reto |
| square | superellipse(infinity) | Canto reto, como sem raio |
Quando usar
- Ícones e avatares, em que o squircle deixa a curva mais contínua que o arco do
round. - Ingressos, cupons e etiquetas, que pedem
scoop,notchoubevel. - Abas e cards com cantos diferentes em cima e embaixo, com os quatro valores do atalho.
- Sempre que o fallback arredondado for aceitável, porque é ele que os navegadores sem suporte mostram.
Leia no blog
Outras ferramentas
Calculadora 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 bordas onduladas
Onda, zigue-zague, festonado, côncavo, serrilhado e ameias na borda de qualquer elemento com mask, no tamanho que você quiser.
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.