corner-block-start-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-block-start-shape définit la forme des deux coins sur le bord supérieur 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-block-start-shape est une forme raccourcie pour les propriétés logiques suivantes :

Syntaxe

css

/* Valeur unique avec un mot-clé pour les deux coins */
corner-block-start-shape: notch;
corner-block-start-shape: squircle;

/* Valeur unique de superellipse() pour les deux coins */
corner-block-start-shape: superellipse(2.7);
corner-block-start-shape: superellipse(-2.5);

/* Coin côté supérieur/côté gauche, coin côté supérieur/côté droit */
corner-block-start-shape: notch squircle;
corner-block-start-shape: notch superellipse(-2.5);

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

Valeurs

La propriété corner-block-start-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 côté supérieur.
Si deux valeurs sont utilisées, la première définit la forme du coin côté supérieur/côté gauche, et la seconde définit la forme du coin côté supérieur/côté droit.

Définition formelle

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

Syntaxe formelle

corner-block-start-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 simple de `corner-block-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 40px 60px, et un corner-block-start-shape de scoop 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: 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: 40px 60px;
  corner-block-start-shape: scoop notch;
}

Résultat

Le résultat affiché ressemble à ceci :

Spécifications

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

Compatibilité des navigateurs

Voir aussi

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