Propriété CSS `corner-start-start-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-start-start-shape définit la forme du coin supérieur gauche 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-start-shape: notch;
corner-start-start-shape: squircle;

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

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

Valeurs

La propriété corner-start-start-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	La valeur superellipse() correspondante.
Type d'animation	Animé selon l'interpolation de superellipse ^(angl.).

Syntaxe formelle

corner-start-start-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-start-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 40% 10px 10px, et un corner-start-start-shape de scoop.

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: goldenrod;
  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: 40% 10px 10px;
  corner-start-start-shape: scoop;
}

Résultat

Le résultat affiché ressemble à ceci :

Spécifications

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

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie corner-shape
Les propriétés corner-start-end-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-start-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-start-start-shape

HTML

CSS

Résultat

Aider à améliorer MDN

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