border-bottom-right-radius
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété border-bottom-right-radius
définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0
, aucun arrondi n'a lieu et le coin est un angle droit.
Exemple interactif
Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de background-clip
.
Note :
Si la valeur de cette propriété n'est pas définie par la propriété raccourcie border-radius
et que cette dernière est appliquée après border-bottom-right-radius
, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de la propriété raccourcie.
Syntaxe
/* Le coin est un quart de cercle */
/* La valeur indique le rayon de courbure */
border-bottom-right-radius: 3px;
/* Valeur avec un pourcentage */
border-bottom-right-radius: 20%;
/* Le coin est un quart d'ellipse */
/* La première valeur indique le demi-axe */
/* horizontal et la seconde le demi-axe */
/* vertical */
border-bottom-right-radius: 0.5em 1em;
border-bottom-right-radius: inherit;
Cette propriété peut prendre deux formes :
-
Une première avec une longueur (
<length>
) ou un pourcentage (<percentage>
) qui indique le rayon de courbure pour ce coin -
Une seconde avec deux valeurs
- La première est une longueur (
<length>
) ou un pourcentage (<percentage>
) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin - La seconde est une longueur (
<length>
) ou un pourcentage (<percentage>
) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin
- La première est une longueur (
Valeurs
<length-percentage>
-
La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type
<length>
. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.
Définition formelle
Valeur initiale | 0 |
---|---|
Applicabilité | tous les éléments, mais les agents utilisateurs ne sont pas tenus de l'appliquer aux éléments de type table ou inline-table lorsque border-collapse vaut collapse . 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 | deux longueurs absolues ou deux pourcentages |
Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
border-bottom-right-radius =
<length-percentage [0,∞]>{1,2}
<length-percentage> =
<length> |
<percentage>
Exemples
CSS
div {
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 130px;
}
.arc_cercle {
border-bottom-right-radius: 40px 40px;
}
.arc_ellipse {
border-bottom-right-radius: 40px 20px;
}
.pourcentage {
border-bottom-right-radius: 40%;
}
.rognage {
border: black 10px double;
border-bottom-right-radius: 40%;
background-color: rgb(250,20,70);
background-clip: content-box; // essayez margin-box...
}
HTML
<div class="arc_cercle"></div>
<div class="arc_ellipse"></div>
<div class="pourcentage"></div>
<div class="rognage"></div>
Résultat
Spécifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-radius |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
La propriété raccourcie
border-radius
-
Les propriétés pour les autres coins :