Propriété CSS border-top-right-radius
La propriété CSS border-top-right-radius arrondit le coin supérieur droit d'un élément. Syntaxe, valeurs simples, doubles et pourcentages.
La propriété CSS border-top-right-radius arrondit le coin supérieur droit de la boîte de bordure d'un élément. C'est l'une des quatre propriétés détaillées dans lesquelles se décompose la propriété abrégée border-radius — les autres étant border-top-left-radius, border-bottom-right-radius et border-bottom-left-radius. Utilisez cette propriété détaillée lorsque vous souhaitez arrondir un seul coin sans affecter les trois autres.
Cette propriété fait partie des propriétés CSS3.
La forme de l'arrondi dépend des valeurs que vous lui donnez :
- Coin droit — lorsque le rayon est
0(valeur par défaut), le coin reste anguleux. - Coin circulaire — lorsque vous donnez une seule valeur (ou deux valeurs égales), le coin est un quart de cercle de ce rayon.
- Coin elliptique — lorsque vous donnez deux valeurs différentes, le coin est un quart d'ellipse.
Si l'élément possède une image d'arrière-plan ou une couleur d'arrière-plan, elle est rognée au niveau de la bordure arrondie. L'étendue de ce rognage est contrôlée par la propriété background-clip.
La propriété accepte les valeurs length, percentage, initial et inherit, et définit les rayons horizontal et vertical du coin supérieur droit arrondi. Lorsqu'une seule valeur est donnée, elle définit à la fois les rayons horizontal et vertical (coin circulaire). Avec deux valeurs, la première définit le rayon horizontal et la seconde le rayon vertical (coin elliptique). Les pourcentages pour le rayon horizontal sont relatifs à la largeur de la boîte, et ceux pour le rayon vertical sont relatifs à sa hauteur. Les valeurs négatives ne sont pas autorisées.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animable | Oui. La bordure supérieure droite est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.borderTopRightRadius = "25px"; |
Syntaxe
Syntaxe de la propriété CSS border-top-right-radius
border-top-right-radius: length | % | initial | inherit;Voyons un exemple où une seule valeur est utilisée. Elle définit à la fois les rayons horizontal et vertical de l'ellipse.
Exemple de la propriété border-top-right-radius :
Exemple de la propriété CSS border-top-right-radius avec une seule valeur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Résultat
Lorsque deux valeurs sont fournies, la première définit le rayon horizontal et la seconde le rayon vertical, produisant un coin elliptique.
Exemple de la propriété border-top-right-radius avec deux valeurs :
Exemple de la propriété CSS border-top-right-radius avec deux valeurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Exemple de la propriété border-top-right-radius en pourcentages :
Exemple de la propriété CSS border-top-right-radius avec des valeurs en % (pourcentages)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Quand l'utiliser
Préférez border-top-right-radius (plutôt que la propriété abrégée border-radius) lorsque seul le coin supérieur droit doit être arrondi — par exemple, le coin avant d'un onglet, une bulle de chat, ou une carte dont les autres coins doivent rester anguleux. Pour arrondir tous les coins à la fois, la propriété abrégée border-radius est plus concise :
/* Round only the top-right corner */
border-top-right-radius: 12px;
/* Round all four corners at once */
border-radius: 12px;Valeurs
Le tableau ci-dessous répertorie les valeurs acceptées.
| Valeur | Description | Essayer |
|---|---|---|
| length | Définit la forme arrondie du coin supérieur droit. | Essayer » |
| % | Définit la forme arrondie du coin supérieur droit en %. | Essayer » |
| initial | Définit la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété depuis son élément parent. |