corner-left-shape

Limited availability

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

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`: The corresponding superellipse() value. `corner-bottom-left-shape`: The corresponding superellipse() value.
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `corner-top-left-shape`: Animates as per superellipse interpolation. `corner-bottom-left-shape`: Animates as per superellipse interpolation.

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

Specification
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

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 2 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content