Propriété CSS border-right
La propriété CSS border-right définit la largeur, le style de ligne et la couleur de la bordure droite des éléments. Il s'agit d'une propriété abrégée permettant de spécifier les valeurs des propriétés suivantes :
Ces trois valeurs de la propriété abrégée peuvent être spécifiées dans n'importe quel ordre, et l'une ou deux d'entre elles peuvent être omises.
La valeur sera prise de la propriété color dans le cas où la couleur n'est pas spécifiée. Si la propriété color n'est pas définie, la couleur noire sera utilisée par défaut.
Si la width n'est pas spécifiée, elle prendra la taille moyenne de l'élément.
| Valeur par défaut | medium none currentColor |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Hérité | Non |
| Animable | Oui. La largeur et la couleur sont animables. |
| Version | CSS1 |
| Syntaxe DOM | object.style.borderRight = "1px solid black"; |
Syntaxe
Syntaxe de la propriété CSS border-right
border-right: border-width border-style border-color | initial | inherit;Exemple de la propriété border-right :
Exemple de la propriété CSS border-right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-right: 5px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-right example</h2>
<div> This is a simple example for the border-right property.</div>
</body>
</html>Résultat
La propriété border-right peut être appliquée à différents éléments et peut prendre diverses valeurs de style.
Exemple de la propriété border-right avec plusieurs valeurs :
Exemple de la propriété CSS border-right avec des valeurs solid, dotted et double
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-right: 7px solid #8ebf42;
}
p {
border-right: 5px dotted #1c87c9;
}
div {
border-right: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green right border</h1>
<p>A heading with a dotted blue right border.</p>
<div>A div element with a thick double right border.</div>
</body>
</html>Vous pouvez également créer une boîte avec l'élément <div> et définir une background-color pour votre boîte, puis ajouter une bordure droite pour obtenir une boîte stylée.
Exemple d'utilisation de la propriété border-right pour créer une boîte stylée :
Exemple de la propriété CSS border-right avec la propriété solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
height: 80px;
text-align: center;
padding: 20px;
background: #ccc;
border-right: 5px solid #000;
}
</style>
</head>
<body>
<div>This box has a solid border on the right side.</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| border-right-width | Définit la largeur de la bordure droite d'un élément. La valeur par défaut est "medium". Valeur requise. |
| border-right-style | Définit le style de ligne de la bordure droite d'un élément. La valeur par défaut est "none". Valeur requise. |
| border-right-color | Définit la couleur de la bordure droite d'un élément. La valeur par défaut est la couleur actuelle du texte. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quels attributs pouvez-vous spécifier lors de l'utilisation de la propriété border-right en CSS ?