Propriété CSS border-top-right-radius
La propriété CSS border-top-right-radius définit la forme arrondie du coin supérieur droit de l'élément.
Cette propriété fait partie des propriétés CSS3.
Il existe trois types d'arrondi. Il peut s'agir d'un cercle ou d'une ellipse, ou la valeur est 0, le coin est carré. Si vous utilisez une image d'arrière-plan ou une couleur, elle sera rognée au niveau de la bordure. Le processus de rognage est défini par la valeur de la propriété background-clip.
La propriété accepte les valeurs de type longueur, pourcentage, initial et inherit. La propriété border-top-right-radius spécifie les rayons horizontal et vertical qui définissent le coin supérieur droit arrondi pour une boîte de bordure. Lorsqu'une seule valeur est fournie, celle-ci spécifie à la fois les rayons horizontal et vertical de l'ellipse. S'il y a deux valeurs, la première définit le rayon horizontal et la seconde définit le rayon vertical. Les pourcentages pour le rayon horizontal se réfèrent à la largeur de la boîte, et les pourcentages pour le rayon vertical se réfèrent à la hauteur de la boîte. Les valeurs négatives ne sont pas autorisées.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Héritée | 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;Essayons 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>Lorsque deux valeurs sont fournies, la première définit le rayon horizontal et la seconde définit le rayon vertical.
Résultat
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 une valeur 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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| length | Définit la forme arrondie du coin supérieur droit. | Tester » |
| % | Définit la forme arrondie du coin supérieur droit en %. | Tester » |
| initial | Définit la propriété à sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS 'border-top-right-radius' ?