corner-start-end-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-start-end-shape définit la forme du coin supérieur et inférieur droit d'une boîte, à l'intérieur de sa 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.

Syntaxe

css

/* Valeurs par mot-clé */
corner-start-end-shape: square;
corner-start-end-shape: bevel;

/* Valeurs de la fonction superellipse() */
corner-start-end-shape: superellipse(1.5);
corner-start-end-shape: superellipse(-2.2);

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

Valeurs

La propriété corner-start-end-shape se définit avec une valeur <corner-shape-value>.

Définition formelle

Valeur initiale	`round`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	The corresponding superellipse() value.
Type d'animation	Animates as per superellipse interpolation.

Syntaxe formelle

corner-start-end-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 simple de `corner-start-end-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-start-end-shape de notch.

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: cyan;
  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-start-end-shape: notch;
}

Résultat

Le résultat affiché ressemble à ceci :

Spécifications

Specification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-start-end-shape

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie corner-shape
Les propriétés corner-start-start-shape, corner-end-start-shape et corner-end-end-shape
Les propriétés corner-top-left-shape, corner-top-right-shape, corner-bottom-left-shape et corner-bottom-right-shape
La propriété raccourcie border-radius
La propriété border-start-end-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