# Playground de corner-shape

> Teste squircle, bevel, scoop, notch e superellipse() nos cantos e leve o CSS com border-radius e corner-shape.

URL: https://dpw.dev/ferramentas/playground-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.

Esta página tem um playground interativo no navegador. Exemplo: cantos `squircle` com 48px de raio. O CSS correspondente:

```css
.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`, `notch` ou `bevel`.
- 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.

Suporte: por enquanto, só Chrome e Edge 139+; nos outros, fica o canto arredondado ([Baseline](https://webstatus.dev/features/corner-shape)).

## Leia no blog

- [A nova propriedade CSS border-shape](https://dpw.dev/css/css-border-shape/)

## Conceitos Fundamentais de CSS

Borda, fundo e sombra seguem o canto porque todos partem da mesma caixa. 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