Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

corner-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'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.

Lapropriété raccourcie CSScorner-shape permet de définir la forme des coins d'une boîte, dans la zone déterminée par la valeur de sa propriétéborder-radius.

Propriétés constitutives

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

Syntaxe

css

/* Valeur unique appliquée aux quatre coins */corner-shape: bevel;/* coin supérieur gauche et inférieur droit, coin supérieur droit et inférieur gauche */corner-shape: notch superellipse(0.6);/* coin supérieur gauche, coin supérieur droit et inférieur gauche, coin inférieur droit */corner-shape: superellipse(-1.2) square squircle;/* coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche */corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;/* Valeurs globales */corner-shape: inherit;corner-shape: initial;corner-shape: revert;corner-shape: revert-layer;corner-shape: unset;

La propriétécorner-shape peut être définie avec une, deux, trois ou quatre valeurs<corner-shape-value> :

Siune valeur est utilisée, elle définit la forme desquatre coins.
Sideux valeurs sont utilisées, la première s'applique auxcoins supérieur gauche et inférieur droit, la seconde auxcoins supérieur droit et inférieur gauche.
Sitrois valeurs sont utilisées, la première définit la forme ducoin supérieur gauche, la seconde celle descoins supérieur droit et inférieur gauche, la troisième celle ducoin inférieur droit.
Si quatre valeurs sont utilisées, elles définissent la forme descoins supérieur gauche,supérieur droit,inférieur droit etinférieur gauche, dans cet ordre (sens horaire).

Valeurs

<corner-shape-value>: Une fonctionsuperellipse() ou un mot-clé équivalent décrivant la forme du coin.

La propriétécorner-shape permet de modifier la forme des coins arrondis créés par la propriétéborder-radius et ses variantes détaillées. Les coins déjà arrondis peuvent être personnalisés davantage selon le degré d'arrondi appliqué, ce qui permet de créer, par exemple, des coins biseautés, encochés ou en forme de carré-rond (squircle en anglais). Les bordures, contours, ombres et effets d'arrière-plan appliqués au conteneur suivront la forme définie du coin.

Si aucune valeur deborder-radius n'est appliquée à un conteneur, ou siborder-radius vaut0,corner-shape n'aura aucun effet.

La propriété raccourciecorner-shape et ses variantes associéescorner-*-shape acceptent de une à quatre valeurs<corner-shape-value>. Chacune est définie directement comme une fonctionsuperellipse() ou un mot-clé décrivant une forme courante. Chaque mot-clé correspond à une valeur précise desuperellipse().

La valeur initiale decorner-shape estround, ce qui donne le même effet que l'utilisation deborder-radius seul, sanscorner-shape. Il existe aussi le mot-clésquare, qui donne le même effet que des coins carrés par défaut, supprimant ainsi toutborder-radius appliqué. La valeurbevel trace une ligne droite entre les deux extrémités d'unborder-radius.

Différentes valeurs decorner-shape peuvent être animées de façon fluide, car les équivalentssuperellipse() des mots-clés servent de valeurs d'interpolation.

La propriété raccourciecorner-shape est particulièrement utile si vous souhaitez que les quatre bordures soient identiques, ou si vous voulez définir différentes valeurs en une seule déclaration. Pour ne définir qu'une ou deux formes de coins à la fois, utilisez les variantes raccourcies ou détailléescorner-*-shape.

Raccourcis et variantes détaillées de`corner-*-shape`

Le raccourcicorner-shape définit la forme des quatre coins en une seule déclaration.

Pour définir la forme d'un seul coin à la fois, utilisez les variantes détaillées :

Propriétés détaillées physiques :
Propriétés détaillées logiques :

Pour définir la forme de deux coins à la fois, utilisez les raccourcis de côté :

Raccourcis physiques :
Raccourcis logiques :

Contraindre les rayons de forme des coins opposés

Lorsque des coins opposés ont des valeurs deborder-radius et decorner-shape qui provoqueraient un chevauchement des formes, le navigateur ajuste les valeurs pour éviter ce chevauchement.

Par exemple, les valeurs suivantes provoqueraient un chevauchement des coins supérieur gauche et inférieur droit, le navigateur ajuste donc le premier composant deborder-radius pour éviter cela.

css

div {  width: 480px;  height: 200px;  background-color: goldenrod;  border-radius: 80% 20px;  corner-shape: scoop;}

Propriétés qui suivent la forme du coin

Les propriétés suivantes suivent la forme du coin lorsqu'elles sont appliquées au conteneur :

Voir ladémonstration des propriétés qui suivent la forme du coin pour quelques exemples.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `corner-top-left-shape`:`round` `corner-top-right-shape`:`round` `corner-bottom-left-shape`:`round` `corner-bottom-right-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 valeursuperellipse() correspondante. `corner-top-right-shape`: La valeursuperellipse() correspondante. `corner-bottom-left-shape`: La valeursuperellipse() correspondante. `corner-bottom-right-shape`: La valeursuperellipse() correspondante.
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `corner-top-left-shape`: Animé selonl'interpolation de superellipse^(angl.). `corner-top-right-shape`: Animé selonl'interpolation de superellipse^(angl.). `corner-bottom-left-shape`: Animé selonl'interpolation de superellipse^(angl.). `corner-bottom-right-shape`: Animé selonl'interpolation de superellipse^(angl.).

Syntaxe formelle

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

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

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

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

Exemples

Examples

Utilisation simple de`corner-shape`

HTML

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

html

<div>Jolis coins creusés</div>

CSS

Nous donnons à la boîte une hauteur (height) fixe, une ombre portée (box-shadow), unborder-radius de 30 pixels et uncorner-shape descoop, ainsi que quelques styles supplémentaires masqués ici pour plus de clarté.

body {  font-family: "Helvetica", "Arial", sans-serif;  width: 240px;  margin: 20px auto;}div {  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)  );}@supports not (corner-shape: scoop) {  body {    all: unset !important;  }  body::before {    content: "Votre navigateur ne prend pas en charge la propriété 'corner-shape'.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

div {  height: 180px;  box-shadow: 1px 1px 3px gray;  border-radius: 30px;  corner-shape: scoop;}

Résultat

Le résultat affiché ressemble à ceci :

Remarquez comment la valeurcorner-shape descoop donne à la boîte des coins concaves — la courbe est une inversion de la courbe par défaut deborder-radius. Notez aussi que l'arrière-plan, la bordure et l'ombre portée suivent la forme de la courbe.

Démonstration des propriétés qui suivent la`corner-shape`

HTML

Le balisage de cet exemple contient un seul élément HTML<div> avec du texte à l'intérieur.

html

<div>  Certaines propriétés suivent la forme du coin, comme la bordure, le contour,  l'ombre portée, le débordement et le filtre d'arrière-plan. Cela est utile  pour aider différents aspects de votre conception à ne pas entrer en conflit.  Comme montré, cela peut produire des effets visuels intéressants, donc vous  devriez tester soigneusement votre conception.</div>

CSS

Pour démontrer comment certaines propriétés suivent la forme des coins d'un conteneur, nous appliquons unebackground-image au<body> du document, puis unborder-radius de40px et uncorner-shape descoop notch au<div>.

Nous appliquons ensuite les éléments suivants au<div> :

Unebackground-color semi-transparente.
Une couleur et un style deborder différents sur chaque bord.
Unbackdrop-filter qui inverse labackground-image définie sur le<body>.
Un style:hover pour montrer que la zone cliquable dépasse la forme du coin.

Des styles d'installation supplémentaires ont été masqués pour plus de clarté.

html {  height: 100%;}body {  font-family: "Helvetica", "Arial", sans-serif;  height: inherit;  margin: 0;  display: flex;  justify-content: center;  align-items: center;}div {  width: 240px;  height: 180px;}@supports not (corner-shape: scoop notch) {  body {    all: unset !important;  }  body::before {    content: "Votre navigateur ne prend pas en charge la propriété 'corner-shape'.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

body {  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")    no-repeat;  background-size: cover;}div {  border-radius: 40px;  corner-shape: scoop notch;  background-color: rgb(255 255 255 / 0.2);  border-top: 3px solid blue;  border-left: 6px dashed red;  border-bottom: 9px solid yellow;  border-right: 12px double green;  backdrop-filter: invert(100%);}div:hover {  background-color: white;}

Résultat

Le résultat affiché ressemble à ceci :

Remarquez que la plupart des propriétés appliquées suivent la forme du<div> résultant de ses stylescorner-shape, mais pas toutes. Le contenu est affiché par rapport à la boîte d'origine, et l'effet de survol s'applique toujours si vous survolez le texte qui dépasse des coins supérieur et inférieur gauches.

Comparer les valeurs de`corner-shape`

Dans cette démonstration, vous pouvez sélectionner différentes valeurs decorner-shape et définir différentes valeurs deborder-radius sur un conteneur pour comparer les effets.

HTML

Le balisage de cet exemple contient un sélecteur (<select>) permettant de choisir différentes valeurs decorner-shape, un curseur<input type="range"> pour sélectionner différentes valeurs deborder-radius, et un élément HTML<section> pour appliquer ces valeurs. Les éléments HTML<option> du sélecteur proposent plusieurs mots-clés et valeurssuperellipse(), répartis en deux groupes avec<optgroup>. Pour les mots-clés, la valeur équivalente desuperellipse() est aussi indiquée, séparée par une barre verticale.

html

<form>  <div>    <label for="corner-shape-choice"      >Choisir une valeur de corner-shape&nbsp;:</label    >    <select>      <optgroup label="Mots-clés">        <option value="square">square | superellipse(infinity)</option>        <option selected value="squircle">squircle | superellipse(2)</option>        <option value="round">round | superellipse(1)</option>        <option value="bevel">bevel | superellipse(0)</option>        <option value="scoop">scoop | superellipse(-1)</option>        <option value="notch">notch | superellipse(-infinity)</option>      </optgroup>      <optgroup label="Fonctions">        <option>superellipse(3)</option>        <option>superellipse(1.5)</option>        <option>superellipse(0.5)</option>        <option>superellipse(-0.5)</option>        <option>superellipse(-1.5)</option>        <option>superellipse(-3)</option>      </optgroup>    </select>  </div>  <div>    <label for="radius-slider"      >Choisir une valeur de border-radius&nbsp;:</label    >    <input      type="range"           min="0"      value="45"      max="90"      step="1" />  </div></form><section></section>

CSS

Nous appliquons unebox-shadow à l'élément<section>. Nous donnons aussi quelques styles de base à<section> et aux éléments du formulaire, qui ont été masqués pour plus de clarté.

html {  font-family: "Helvetica", "Arial", sans-serif;}body {  width: fit-content;  margin: 20px auto;}section {  display: flex;  justify-content: center;  align-items: center;  margin-top: 20px;}select {  padding: 3px 5px;}form div:nth-of-type(2) {  margin-top: 5px;  display: flex;}section {  width: 100%;  height: 180px;  background-color: gold;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}@supports not (corner-shape: scoop) {  body {    all: unset !important;  }  body::before {    content: "Votre navigateur ne prend pas en charge la propriété 'corner-shape'.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

section {  box-shadow: 1px 1px 3px gray;}

const rectangle = document.querySelector("section");const select = document.querySelector("select");const range = document.getElementById("radius-slider");function setCorners() {  rectangle.style.cornerShape = select.value;  const brValue = `${range.value}px`;  rectangle.style.borderRadius = brValue;  rectangle.innerHTML = `<div><code>corner-shape: ${select.value};</code><br><code>border-radius: ${brValue};</code></div>`;}select.addEventListener("change", setCorners);range.addEventListener("input", setCorners);setCorners();

Le JavaScript qui applique les valeurs sélectionnées par l'utilisateur·ice à<section> a été masqué pour plus de clarté.

Résultat

Le résultat affiché ressemble à ceci :

Essayez de sélectionner différentes valeurs pour voir comment cela affecte la forme des coins.

Comparaison des valeurs de`superellipse()`

Dans cet exemple, nous proposons deux curseurs<input type="range"> permettant de parcourir de nombreuses valeurs différentes decorner-shape avecsuperellipse() et deborder-radius pour comparer les effets de chaque valeur sur un conteneur.

HTML

Le balisage de cet exemple contient deux éléments<input type="range"> permettant de sélectionner différentes valeurs decorner-shapesuperellipse() et deborder-radius, ainsi qu'un élément HTML<section> pour appliquer ces valeurs.

html

<form>  <div>    <label for="superellipse-slider"      >Choisir une valeur superellipse()&nbsp;:</label    >    <input      type="range"           min="-5"      value="0"      max="5"      step="0.1" />  </div>  <div>    <label for="radius-slider"      >Choisir une valeur de border-radius&nbsp;:</label    >    <input      type="range"           min="0"      value="45"      max="90"      step="1" />  </div></form><section></section>

CSS

Nous appliquons une ombre portée (box-shadow) à l'élément<section>. Des styles de base supplémentaires ont été masqués pour plus de clarté.

html {  font-family: "Helvetica", "Arial", sans-serif;}body {  width: fit-content;  margin: 20px auto;}section {  display: flex;  justify-content: center;  align-items: center;  margin-top: 20px;}form div {  margin-top: 5px;  display: flex;}section {  width: 100%;  height: 180px;  background-color: orange;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}@supports not (corner-shape: superellipse(0)) {  body {    all: unset !important;  }  body::before {    content: "Votre navigateur ne prend pas en charge la propriété 'corner-shape'.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

section {  box-shadow: 1px 1px 3px gray;}

const rectangle = document.querySelector("section");const superEllipseRange = document.getElementById("superellipse-slider");const borderRadiusRange = document.getElementById("radius-slider");function setCorners() {  const seValue = `superellipse(${superEllipseRange.value})`;  rectangle.style.cornerShape = seValue;  const brValue = `${borderRadiusRange.value}px`;  rectangle.style.borderRadius = brValue;  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;}superEllipseRange.addEventListener("input", setCorners);borderRadiusRange.addEventListener("input", setCorners);setCorners();

Le JavaScript qui applique les valeurs sélectionnées par l'utilisateur·ice à<section> a été masqué pour plus de clarté.

Résultat

Le résultat affiché ressemble à ceci :

Essayez de sélectionner différentes valeurs pour voir comment cela affecte la forme des coins.

Animer`corner-shape`

Dans cet exemple, nous montrons comment la propriétécorner-shape peut être animée.

HTML

html

<div></div>

CSS

Nous créons un ensemble de@keyframes qui anime de façon fluide les valeurs decorner-shape entresquare etnotch. Nous appliquons ensuite uneanimation basée sur ces@keyframes au<div> lorsque l'élément<html> englobant est survolé ou sélectionné. Des styles de base supplémentaires pour le<div> ont été masqués pour plus de clarté.

body {  width: 200px;  margin: 20px auto;}div {  width: 100%;  height: 200px;  background-color: green;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );  box-shadow: 1px 1px 3px gray;  border-radius: 50%;  corner-shape: square;  outline: none;}@supports not (corner-shape: square) {  body {    all: unset !important;  }  body::before {    content: "Votre navigateur ne prend pas en charge la propriété 'corner-shape'.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

@keyframes corner-pulse {  0% {    corner-shape: square;  }  /* Pour rendre le point de départ apparent, gardons  la forme identique pendant une courte durée. */  20% {    corner-shape: square;  }  100% {    corner-shape: notch;  }}div {  animation: corner-pulse infinite alternate 4s linear;}

Résultat

Le résultat affiché ressemble à ceci :

Spécifications

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

Compatibilité des navigateurs

Voir aussi

La propriétéborder-radius
Le moduledes bordures et décorations de boîte CSS
Le moduledes arrière-plans et bordures CSS
Le moduledes animations CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le2 févr. 2026 par lescontributeurs du MDN.

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

Movatterモバイル変換

corner-shape

Propriétés constitutives

Syntaxe

Valeurs

Description

Raccourcis et variantes détaillées de`corner-*-shape`

Contraindre les rayons de forme des coins opposés

Propriétés qui suivent la forme du coin

Définition formelle

Syntaxe formelle

Exemples

Examples

Utilisation simple de`corner-shape`

HTML

CSS

Résultat

Démonstration des propriétés qui suivent la`corner-shape`

HTML

CSS

Résultat

Comparer les valeurs de`corner-shape`

HTML

CSS

Résultat

Comparaison des valeurs de`superellipse()`

HTML

CSS

Résultat

Animer`corner-shape`

HTML

CSS

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Help improve MDN