corner-shape, la proprietà CSS che decide la forma degli angoli

Per arrotondare un angolo in CSS c'è sempre stata una sola risposta: border-radius. Si imposta un raggio, il browser disegna una curva, e l'unica variabile sotto controllo è quanto quella curva è ampia. La forma in sé non era negoziabile.

corner-shape aggiunge la variabile che mancava. È una shorthand che definisce la forma degli angoli di un box all'interno dell'area già delimitata da border-radius. Le due proprietà lavorano insieme: border-radius stabilisce quanta parte dell'angolo viene coinvolta, corner-shape decide cosa succede dentro quella porzione. La dipendenza va in una direzione sola. Se border-radius non è applicata o vale 0, corner-shape non ha nulla su cui agire e non produce alcun effetto.

I valori sono tutti lo stesso valore

Le keyword disponibili sono sei: round, scoop, bevel, notch, square e squircle. Sotto, però, sono la stessa funzione con argomenti diversi. corner-shape accetta anche la funzione superellipse(), che prende un numero, infinity o -infinity, e ogni keyword corrisponde a un punto preciso di quella funzione:

• square equivale a superellipse(infinity)
• squircle a superellipse(2)
• round a superellipse(1)
• bevel a superellipse(0)
• scoop a superellipse(-1)
• notch a superellipse(-infinity)

Letta in quest'ordine, la lista spiega la proprietà meglio di qualsiasi descrizione. Il parametro descrive un continuo: i valori alti spingono l'angolo verso l'esterno finché riempie tutto il quadrato, 1 restituisce la curva a cui siamo abituati, 0 la appiattisce in un taglio diagonale, i valori negativi tirano l'angolo verso l'interno fino a trasformarlo in un incavo a spigolo vivo. Tra un passaggio e l'altro c'è qualsiasi numero, ed è lì che corner-shape smette di essere un insieme di preset.

La sintassi ricalca quella di border-radius: un valore vale per tutti e quattro gli angoli, con due, tre o quattro valori la distribuzione resta la stessa, e nel caso di quattro valori l'ordine è orario a partire dall'alto a sinistra. Esistono le longhand fisiche, corner-top-left-shape e le altre tre, e quelle logiche, corner-start-start-shape e le corrispondenti, utili quando il layout deve reggere un cambio di modalità di scrittura.

I valori sono animabili e l'interpolazione passa per la superellisse, quindi una transizione tra una curva e uno smusso attraversa le forme intermedie invece di saltare da uno stato all'altro.

Cosa segue la forma dichiarata

Il motivo per cui corner-shape conta più di un'opzione decorativa in più sta nell'elenco delle cose che la rispettano: background-color, background-image, border, outline, box-shadow, overflow e backdrop-filter seguono tutti la forma dichiarata.

È la differenza rispetto a clip-path. Con clip-path una silhouette smussata o intaccata si ottiene già oggi, ma il ritaglio agisce sull'elemento renderizzato: il bordo viene tagliato insieme al resto, l'ombra sparisce invece di seguire il nuovo profilo, e tutto ciò che dovrebbe stare fuori dal box va ricostruito a mano. corner-shape interviene prima, sulla forma del box, e le decorazioni che appartengono al box vengono ridisegnate di conseguenza. Un angolo a scoop mantiene il bordo lungo la concavità e proietta l'ombra sulla stessa linea.

Tre dichiarazioni bastano:

div {
  height: 180px;
  border-radius: 30px;
  corner-shape: scoop;
  box-shadow: 1px 1px 3px gray;
}

C'è una seconda condizione che disattiva la proprietà, ed è facile inciamparci. Quando è impostata border-shape, border-radius viene ignorata, e senza border-radius corner-shape non ha effetto. Nessun errore, nessun avviso: l'angolo resta com'era.

Dove funziona oggi

MDN classifica corner-shape come tecnologia sperimentale a disponibilità limitata. Non è Baseline.

L'articolo che Smashing Magazine ha dedicato alla proprietà nel marzo 2026 indicava il supporto in Chrome dalla versione 139 e negli altri browser Chromium, con Firefox e Safari esclusi. È una fotografia legata a quella data. Prima di prendere una decisione conviene verificare il supporto sui dati aggiornati, non su un articolo.

Come portarla in produzione

Il supporto limitato pesa meno di quanto sembri, per come la proprietà si comporta quando manca. Un browser che non riconosce corner-shape scarta la dichiarazione e tiene quello che border-radius aveva già stabilito. L'angolo a scoop torna a essere un angolo arrotondato. Il layout non si sposta, il bordo resta, l'ombra resta, e chi non vede la forma non perde informazioni.

Da qui l'insistenza di Smashing Magazine sul progressive enhancement come approccio necessario finché il supporto resta parziale. La condizione è che la forma sia decorazione. Se è la tacca a comunicare che una card è un biglietto, o se lo smusso è l'unico segnale che distingue un controllo disattivato, il fallback smette di essere tale e diventa un'interfaccia che perde un pezzo. Dove un angolo arrotondato sarebbe stata comunque una risposta accettabile, corner-shape si aggiunge senza costi. Dove la forma porta significato, il risultato funziona solo per una parte del pubblico.

Negli scenari più articolati, @supports resta il posto in cui isolare la versione arricchita lasciando intatta quella di base.

Conviene pensare a corner-shape come al secondo parametro che border-radius non ha mai avuto: la dimensione dell'angolo si regola da sempre, la forma no. Gran parte delle interfacce continuerà a fermarsi a round, e va bene così. I casi in cui la proprietà si ripaga sono quelli in cui una silhouette specifica fa parte di come un prodotto si presenta, e in cui ottenerla oggi significa impilare pseudo-elementi e clip-path che poi qualcuno deve mantenere.

Fonti

1. MDN Web Docs, “corner-shape CSS property”, consultata il 15 settembre 2026
2. Smashing Magazine, “Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI”, marzo 2026