Formas orgânicas no CSS em 2026: por que troquei o retângulo por squircle, shape() e border-shape

Formas orgânicas no CSS, em 2026, são cantos e contornos fora do retângulo feitos direto no código, com as propriedades corner-shape, border-shape e a função shape(). Na prática, isso significa que o squircle, o recorte chanfrado e a borda com curva deixaram de ser imagem exportada do Figma e viraram parte do sistema de design. Aqui no Studio Seu eu já trato forma como token de marca, do mesmo jeito que trato cor e tipografia.

Por que as formas orgânicas no CSS importam agora

Durante mais de uma década, a web inteira foi desenhada com o mesmo canto: o border-radius. Ele é ótimo, mas gera sempre o mesmo arco circular. Resultado: botão de banco, card de e-commerce e site de estúdio criativo ficaram com a mesma cara. Quando eu olho um portfólio de sites de 2024 lado a lado, a sensação é de que todo mundo comprou a mesma forma de bolo.

Em 2026 isso mudou por dois motivos. Primeiro, a estética migrou para o orgânico: os relatórios de tendência do ano falam de paletas terrosas, skeuomorfismo leve e interfaces que parecem feitas por gente. Segundo, e mais importante, o navegador finalmente deixou a gente desenhar essas formas sem gambiarra.

O que já dá para usar em 2026

corner-shape e superellipse(): o squircle nativo

A propriedade corner-shape chegou ao Chrome e ao Edge na versão 139 e trabalha junto com o border-radius: o raio define o tamanho do canto, o corner-shape define a geometria. Com superellipse() eu consigo o squircle, aquele canto contínuo que a Apple usa nos ícones, além de chanfro (bevel), entalhe (notch) e curva para dentro (scoop). O melhor detalhe: borda, sombra e o anel de foco acompanham a forma sozinhos.

border-shape: bordas que não são retângulo

O border-shape entrou estável no Chrome 147, em abril de 2026. Ele permite definir a borda com polígono, círculo ou qualquer caminho, usando a mesma sintaxe do clip-path. A diferença para o recorte antigo é enorme: com clip-path, a sombra e o contorno eram cortados junto; com border-shape, a borda é desenhada na forma certa e só o interior é recortado.

shape(): o caminho vetorial escrito em CSS

A função shape() deixa escrever caminhos complexos, com curvas, direto no CSS, e usar em clip-path, shape-outside e border-shape. Para mim, é o que mais aproxima o CSS do trabalho de um designer de identidade: dá para transformar um elemento gráfico da marca em forma responsiva, que se adapta ao tamanho do container, em vez de exportar um SVG estático para cada breakpoint.

Como eu uso formas orgânicas nos projetos do Studio Seu

Na minha experiência, o erro mais comum é usar forma nova como enfeite. Eu sigo três regras.

• A forma nasce da marca, não do CSS. Se a identidade tem um corte diagonal no logotipo, esse corte vira o chanfro dos botões. Se a marca é acolhedora, como uma confeitaria, o squircle suave conversa melhor do que o canto reto.
• Uma forma assinatura, no máximo duas. Eu defino no design system um token de forma para componentes interativos e outro para superfícies grandes. Mais do que isso vira ruído.
• A forma nunca carrega informação sozinha. Estado de erro, seleção ou foco continuam tendo cor, texto e contraste. Forma é reforço, não sinal único.

No fluxo de trabalho, eu desenho a forma no Figma, anoto o valor equivalente em superellipse() ou shape() na documentação do componente, e o token vai para o código já com o fallback definido. Assim a decisão de marca não se perde no handoff.

O cuidado com suporte: progressive enhancement

Aqui eu sou bem direto com o cliente. Em meados de 2026, o corner-shape funciona só em navegadores Chromium, algo perto de 65% dos usuários, e nem Safari nem Firefox anunciaram data. Isso importa muito no Brasil, onde uma fatia grande do público premium navega em iPhone.

Por isso eu trato formas orgânicas como camada extra. A base é sempre um border-radius bem escolhido, que já funciona em todo lugar. Por cima, com @supports, entra o squircle ou o chanfro. Quem está no Chrome vê a forma completa; quem está no Safari vê um canto arredondado honesto, sem nada quebrado. Ninguém perde leitura, contraste ou clique.

E o ritmo não para: o Chrome 155 entrou em beta em 16 de setembro de 2026 com a função symbols() e novas media features. Eu acompanho cada versão, mas só coloco em produção o que tem fallback limpo.

O ganho real para o negócio

Sai imagem, entra código. Um card com canto especial que antes precisava de SVG ou máscara PNG agora é uma linha de CSS. Isso deixa a página mais leve, mais fácil de manter e mais consistente entre telas. E, principalmente, devolve personalidade para a interface: quando alguém entra no site, reconhece a marca antes de ler o nome.

Perguntas frequentes

O que é squircle no CSS?

É um canto de curvatura contínua, entre o quadrado e o círculo. Em 2026 ele é feito com corner-shape: superellipse(2) somado a um border-radius.

corner-shape funciona no Safari?

Ainda não. Em 2026 ele funciona no Chrome e no Edge a partir da versão 139. No Safari e no Firefox, o navegador simplesmente mostra o border-radius comum.

Qual a diferença entre clip-path e border-shape?

O clip-path recorta tudo, inclusive borda e sombra. O border-shape desenha a borda na forma escolhida e mantém sombra e contorno alinhados, o que dá um acabamento muito mais limpo.

Vale a pena usar formas orgânicas em um e-commerce?

Vale, desde que como camada de marca e com fallback. A forma nunca deve esconder botão, preço ou estado de erro.

Conclusão

Eu vejo as formas orgânicas no CSS como a volta da mão do designer para dentro do navegador. Depois de anos presos ao mesmo arco, finalmente dá para desenhar cantos e contornos que são da marca, e não do framework. Se você sente que o seu site ficou com cara de template e quer uma interface que pareça sua, me chama. Aqui no Studio Seu eu adoro começar um projeto justamente por esse tipo de detalhe.