Propriété CSS `corner-left-shape`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more browser support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété CSS corner-left-shape définit la forme des deux coins sur le bord gauche d'une boîte, à l'intérieur de leur zone border-radius.

Pour une description complète du comportement des formes de coins et plusieurs exemples, consultez la page de la propriété raccourcie corner-shape.

Propriétés constitutives

La propriété corner-left-shape est une forme raccourcie pour les propriétés physiques suivantes :

Syntaxe

css

/* Valeur unique par mot-clé pour les deux coins */
corner-left-shape: round;
corner-left-shape: bevel;

/* Valeur unique superellipse() pour les deux coins */
corner-left-shape: superellipse(1.2);
corner-left-shape: superellipse(-2.5);

/* Coin supérieur, coin inférieur */
corner-left-shape: round bevel;
corner-left-shape: bevel superellipse(1.2);

/* Valeurs globales */
corner-left-shape: inherit;
corner-left-shape: initial;
corner-left-shape: revert;
corner-left-shape: revert-layer;
corner-left-shape: unset;

Valeurs

La propriété corner-left-shape se définit avec une ou deux valeurs <corner-shape-value> :

Si une valeur est utilisée, elle définit la forme des deux coins gauches.
Si deux valeurs sont utilisées, la première définit la forme du coin supérieur gauche, et la seconde définit la forme du coin inférieur gauche.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `corner-top-left-shape`: `round` `corner-bottom-left-shape`: `round`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `corner-top-left-shape`: La valeur superellipse() correspondante. `corner-bottom-left-shape`: La valeur superellipse() correspondante.
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `corner-top-left-shape`: Animé selon l'interpolation de superellipse ^(angl.). `corner-bottom-left-shape`: Animé selon l'interpolation de superellipse ^(angl.).

Syntaxe formelle

corner-left-shape = 
  <'corner-top-left-shape'>{1,2}  

<corner-top-left-shape> = 
  <corner-shape-value>  

<corner-shape-value> = 
  round             |
  scoop             |
  bevel             |
  notch             |
  square            |
  squircle          |
  <superellipse()>  

<superellipse()> = 
  superellipse( <number>  |
  infinity                |
  -infinity )

Exemples

Vous pouvez trouver d'autres exemples liés sur la page de référence corner-shape.

Utilisation basique de `corner-left-shape`

HTML

Le balisage de cet exemple contient un seul élément HTML <div>.

html

<div></div>

CSS

Nous appliquons à la boîte quelques styles de base, qui sont masqués ici pour plus de clarté. Nous appliquons aussi un box-shadow, un border-radius de 20px 40px / 60px 80px, et un corner-left-shape de notch bevel.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 20px 40px / 60px 80px;
  corner-left-shape: notch bevel;
}

Résultat

Le résultat affiché ressemble à ceci :

Spécifications

Spécification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-left-shape

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie corner-shape
Les propriétés corner-top-shape, corner-bottom-shape et corner-right-shape
Les propriétés corner-block-start-shape, corner-block-end-shape, corner-inline-start-shape et corner-inline-end-shape
La propriété raccourcie border-radius
Les propriétés border-top-left-radius et border-bottom-left-radius
Le module des bordures et décorations de boîte CSS
Le module des arrière-plans et bordures CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 20 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Propriété CSS corner-left-shape

HTML

CSS

Résultat

Aider à améliorer MDN

Propriété CSS `corner-left-shape`