Corner-shape - Propriété CSS

Schéma de la syntaxe de corner-shape.

Description des termes utilisés sur le schéma :

• n est une valeur numérique positive ou négative, sans unité.

Description de la propriété corner-shape.

⚠

corner-shape est une propriété encore mal gérée par les navigateurs, en particulier par Firefox   et Safari  .

corner-shape définit la forme des arrondis d'angle. La propriété border-radius en définit les dimensions, comme illustré par le dessin ci-dessous.

En fait corner-shape est une propriété résumée qui regroupe les valeurs pour les propriétés suivantes. Elle accepte donc de une à quatre valeurs, une pour chacun des angles.

Voici comment se répartisse les valeurs en fonction de leur nombre :

Une seule valeur r1.

Deux valeurs r1 et r2.

Trois valeurs.

Quatre valeurs.

Il faut noter aussi les propriétés suivantes : corner-top, corner-right, corner-bottom et corner-left, qui gère la forme de l'arrondi pour les deux angles consécutifs à un côté. Elles sont actuellement peu prises en charge.

Bien entendu, les arrière-plans sont découpé conformément à corner-shape et les ombrages suivent la forme définie. Il en de même pour la zone sensible aux événements de souris.

Prise en charge de la langue.

Pour chacune des propriétés physiques, une propriété logique a été définie. Rappelons que les propriétés logiques sont sensible au mode d'écriture en fonction de la langue.

Valeurs pour corner-shape.

• corner-shape: round;

  Round est la valeur initiale pour corner-shape. Elle correspond au angles arrondis définir par 'border-radius} sans utilisation de la propriété corner-shape Les angles sont des quarts d'ellipse convexe. Cette valeur est équivalente à superellipse(1).

  corner-shape:round;
• corner-shape: squircle;

  Avec squircle la forme des angles est entre le carrée (square) et le cercle (circle). La valeur est équivalente à superellipse(3)

  corner-shape:squircle;
• corner-shape: square;

  square : le forme des angles est carrée, autrement dit il n'y a pas d'arrondis. C'est équivalent à superellipse(infinity). Cela peut être utile néanmoins dans le cas d'une animation.

  corner-shape:square;
• corner-shape: bevel;

  bevel coupe les angles par une diagonale. C'est équivalent à superellipse(0).

  corner-shape:bevel;
• corner-shape: scoop;

  La valeur scoop coupe les angles par un quart d'ellipse concave. C'est équivalent à superellipse(-1).

  corner-shape:scoop;
• corner-shape: notch;

  La valeur notch découpe les angles par un carré concave. C'est équivalent à superellipse(-infinity).

  corner-shape:notch;
• corner-shape: superellipse(n);

  La fonction superellipse() permet d'obtenir toute les formes d'arrondis déjà vues. Celles-ci n'existant que pour des raisons pratiques. La fonction attend juste un paramètre qui est un nombre décimal sans unité, positif ou négatif.

  Plus de détails sur la fonction superellipse().

  corner-shape:superellipse(1.5);
• corner-shape: round notch scoop bevel;

  La propriété corner-shape accepte de une à quatre valeurs, avec la signification suivante :

  • Une seule valeur : elle s'applique aux quatre angles.
  • Deux valeurs. La première s'applique au coin en haut à gauche, et au coin en bas à droite. La deuxième s'occupe des deux autres angles.
  • Trois valeurs. La premiere valeur est celle de l'angle en haut à gauche, la deuxième des angles en heut à droite et en bas à gauche, et la troisième de l'angle en bas à droite.
  • Quatre valeurs. Chacune est affectée à un des angles en tournant dans le sens des aiguilles d'une montre et en commençant par le coin en haut à gauche.

  
  Exemple avec quatre valeurs différentes :

  corner-shape:round notch scoop bevel;
• corner-shape: initial; (round) corner-shape: inherit; corner-shape: revert; corner-shape: revertLayer; corner-shape: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de corner-shape.

La propriété corner-shape s'anime très bien, et le passage d'une valeur à l'autre est très progressif, même si l'animation est définie avec les mots clés round, square, scoop, etc. Car toutes ces valeurs ont un équivalent numérique avec la fonction superellipse().

Accéder à la propriété corner-shape par programme.

Avec Javascript, modifier la valeur de corner-shape.

En Javascript, il est facile de modifier la forme des angles avec la corner-shape. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case et une autre syntaxe avec la notation en camel-case.

let el = document.getElementById('id'); el.style['corner-shape'] = 'scoop'; // ou let el = document.getElementById('id'); el.style.cornerShape = 'scoop';

Avec Javascript, lire la valeur de corner-shape.

Si la propriété a été affectée directement à l'élément lui-même via son attribut style, vous pouvez utiliser le code ci-dessous. Il ne fonctionnera pas si la propriété a été affectée via un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['corner-shape']; // ou let el = document.getElementById('id'); let value = el.style.cornerShape;

Avec Javascript, lire la valeur calculée de corner-shape.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Si aucune valeur n'est trouvée, c'est la valeur initiale de la propriété (round dans le cas de corner-shape). Mais dans tous les cas, la valeur calculée est toujours définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('corner-shape');

Avec JQuery, modifier la valeur de corner-shape.

Avec JQuery il est possible également de modifier la forme des arrondis d'angle.


$('#id').css('corner-shape', 'scoop');
// ou
$('#id').css('cornerShape', 'scoop');


Avec JQuery, lire la valeur calculée de corner-shape.

Il est possible également de lire la valeur calculée de la propriété.

let value = $('#id').css('corner-shape');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété corner-shape et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de corner-shape : les valeurs discrètes sont conservées, même si elles ont été affectées par superellipse(). Toutefois si le paramètre superellipse() ne correspond pas à une valeur discrète, la fonction est mémorisée.
Si la valeur calculée est toujours vide cela veut dire que votre navigateur ne reconnaît pas la propriété corner-shape.

Exemple interactif avec la propriété corner-shape.

Compatibilité des navigateurs avec corner-shape.

1

Propriété
corner-shape

2

Fonction
superellipse()

Estimation de la prise en charge globale.

66%

66%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Firefox

Firefox pour Androïd

KaiOS Browser

Opéra

Safari sur IOS

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété corner-shape.

• Module CSS - Bordures et décorations - Niveau 4

  Première introduction de la propriété résumée corner-shape et des propriétés détaillées correspondantes.
  

  22 Juillet 2025

  Document de travail.

  

  

  

Voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété corner-shape fait partie du module CSS Borders and Box Decorations Module.
Les définitions suivantes sont également décrites dans ce même module.

Fonctions :