Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-radius
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriétéCSSborder-radius permet d'arrondir les coins du bord extérieur d'un élément. Vous pouvez définir un seul rayon pour obtenir des coins circulaires, ou deux rayons pour obtenir des coins elliptiques.
Exemple interactif
border-radius: 30px;border-radius: 25% 10%;border-radius: 10% 30% 50% 70%;border-radius: 10% / 50%;border-radius: 10px 100px / 120px;border-radius: 50% 20% / 10% 40%;<section> <div> Ceci est une boîte avec des coins arrondis. </div></section>#example-element { width: 80%; height: 80%; display: flex; justify-content: center; flex-direction: column; background-color: #5b6dcd; color: white; padding: 10px;}Propriétés constitutives
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
/* La syntaxe du premier rayon accepte de une à quatre valeurs *//* Le rayon est appliqué aux 4 côtés */border-radius: 10px;/* haut gauche et bas droite | haut droite et bas gauche */border-radius: 10px 5%;/* haut gauche | haut droite et bas gauche | bas droite */border-radius: 2px 4px 2px;/* haut gauche | haut droite | bas droite | bas gauche */border-radius: 1px 0 3px 4px;/* La syntaxe du second rayon accepte de une à quatre valeurs *//* rayons horizontaux (cf. ci-avant) / rayon vertical pour tous les angles */border-radius: 10px / 20px;/* rayons horizontaux puis / haut gauche et bas droite | haut droite et bas gauche */border-radius: 10px 5% / 20px 30px;/* rayons horizontaux puis / haut gauche | haut droite et bas gauche | bas droite */border-radius: 10px 5px 2em / 20px 25px 30%;/* rayons horizontaux puis / haut gauche | haut droite | bas droite | bas gauche */border-radius: 10px 5% / 20px 25em 30px 35em;/* Valeurs globales */border-radius: inherit;border-radius: initial;border-radius: revert;border-radius: revert-layer;border-radius: unset;La propriétéborder-radius peut être définie avec :
- une, deux, trois voire quatre valeurs de longueur (
<length>) ou de pourcentages (<percentage>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle. - puis éventuellement d'une barre oblique « / » suivie d'une, deux, trois ou quatre valeurs
<length>ou<percentage>. Cela permet de définir un rayon supplémentaire pour obtenir des coins elliptiques.
Valeurs
| Tous les côtés |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour chaque coin de la bordure. Cette forme est uniquement utilisée lorsque la déclaration contient une seule valeur. |
| Haut gauche et Bas droite |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure. Cette forme est uniquement utilisée avec la syntaxe à deux valeurs. |
| Haut droite et Bas gauche |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure. Cette forme est utilisée avec les syntaxes à deux ou trois valeurs. |
| Haut gauche |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette forme est utilisée avec les syntaxes à trois ou quatre valeurs. |
| Haut droite |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette forme est utilisée avec la syntaxe à quatre valeurs. |
| Bas droite |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette forme est utilisée avec les syntaxes à trois ou quatre valeurs. |
| Bas gauche |  | Une valeur de longueur (<length>) ou de pourcentages (<percentage>) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette forme est utilisée avec la syntaxe à quatre valeurs. |
<length>Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Les valeurs négatives sont considérées comme invalides.
<percentage>Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides.
Ainsi :
border-radius: 1em / 5em;/* est équivalent à : */border-top-left-radius: 1em 5em;border-top-right-radius: 1em 5em;border-bottom-right-radius: 1em 5em;border-bottom-left-radius: 1em 5em;border-radius: 4px 3px 6px / 2px 4px;/* est équivalent à : */border-top-left-radius: 4px 2px;border-top-right-radius: 3px 4px;border-bottom-right-radius: 6px 2px;border-bottom-left-radius: 3px 4px;Description
La courbure de la bordure s'applique à l'arrière-plan (défini avec la propriétébackground) même si l'élément n'a aucune bordure. Le rognage de l'arrière-plan s'applique sur la boîte définie parbackground-clip.
La propriétéborder-radius ne s'applique pas aux éléments de tableaux lorsqueborder-collapse vautcollapse.
Note :Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exempleborder-radius: 0 0 inherit inherit pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie : |
|---|---|
| Applicabilité | tous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de typetable ouinline-table lorsqueborder-collapse vautcollapse. Le comportement sur les éléments de type table interne est pour l'instant indéfini.. S'applique aussi à::first-letter. |
| Héritée | non |
| Pourcentages | se rapporte à la dimension correspondance de la boîte de bordure |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
border-radius =
<length-percentage [0,∞]>{1,4}[ /<length-percentage [0,∞]>{1,4}]?
<length-percentage> =
<length>|
<percentage>
Exemples
Comparer les styles de bordure
L'exemple suivant contient sept éléments HTML<pre>, chacun illustrant des combinaisons de stylesborder etborder-radius.Les styles appliqués à chaque élément<pre> sont inclus dans le contenu de l'élément, afin que vous puissiez voir les déclarations CSS nécessaires pour créer le style de bordure associé :
<pre> border: solid 10px; border-radius: 10px 40px 40px 10px;</pre><pre> border: groove 1em red; border-radius: 2em;</pre><pre> background: gold; border: ridge gold; border-radius: 13em/3em;</pre><pre> border: none; border-radius: 40px 10px; background: gold;</pre><pre> border: none; border-radius: 50%; background: burlywood;</pre><pre> border: dotted; border-width: 10px 4px; border-radius: 10px 40px;</pre><pre> border: dashed; border-width: 2px 4px; border-radius: 40px;</pre>pre { margin: 20px; padding: 20px; width: 80%; height: 80px;}pre#example-1 { border: solid 10px; border-radius: 10px 40px 40px 10px;}pre#example-2 { border: groove 1em red; border-radius: 2em;}pre#example-3 { background: gold; border: ridge gold; border-radius: 13em/3em;}pre#example-4 { border: none; border-radius: 40px 10px; background: gold;}pre#example-5 { border: none; border-radius: 50%; background: burlywood;}pre#example-6 { border: dotted; border-width: 10px 4px; border-radius: 10px 40px;}pre#example-7 { border: dashed; border-width: 2px 4px; border-radius: 40px;}Utilisercorner-shape avecborder-radius
Lorsqu'une valeur deborder-radius différente de0 est appliquée à un coin d'une boîte, vous pouvez utiliser la propriétécorner-shape (ou l'une de sesformes longues et raccourcies) pour appliquer des formes personnalisées à ce coin, comme un biseau, une encoche ou une superellipse. Cet exemple montre l'utilisation decorner-shape.
HTML
The markup for this example contains a single<div> element.
<div></div>CSS
Nous appliquons à la boîte quelques styles de base, qui sont masqués ici pour plus de clarté. Nous appliquons aussi unbox-shadow, unborder-radius de0 20% 50px 30% et uncorner-shape desuperellipse(0.5) bevel notch squircle.
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) );}div { box-shadow: 1px 1px 3px gray; border-radius: 0 20% 50px 30%; corner-shape: superellipse(0.5) bevel notch squircle;}Résultat
Le résultat affiché ressemble à ceci :
Remarquez qu'aucune forme de coin n'est appliquée au coin supérieur gauche, car il a une valeur deborder-radius à0.
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-radius |
Compatibilité des navigateurs
Voir aussi
- Les propriétés CSS relatives à
border-radius:border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-start-start-radius,border-start-end-radius,border-end-start-radius,border-end-end-radius