Propriété CSS border-right

❮ Précédent Suivant ❯

La propriété CSS border-right est utilisée pour définir la largeur, le style de ligne et la couleur de la bordure droite des éléments. C'est une propriété raccourcie pour la spécification des valeurs border-right-width, border-right-style et border-right-color.

Ces trois valeurs de la propriété raccourcie peuvent être spécifiées dans n'importe quel ordre, et certains entre elles peuvent être manquées.

S'il n'y a aucune couleur spécifiée, la valeur sera prise de la propriété color. Si la propriété color n'est pas définie, elle sera noir par défaut.

Si la valeur width n'est pas spécifiée, elle sera un élément de la taille moyenne.

Valeur initial	medium none currentColor
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non
Animable	Oui. La largeur et la couleur de la bordure sont animables.
Version	CSS1
Syntaxe DOM	object.style.borderRight = "1px solid black";

Syntaxe

border-right: border-width border-style border-color | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      border-right: 5px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-right</h2>
    <div> C'est un exemple pour la propriété border-right .</div>
  </body>
</html>

Essayez-vous-même!

La propriété border-right peut être appliquée aux différents éléments et avoir les valeurs des styles variées.

Exemple

<!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>Un titre avec une bordure droite solide, verte</h1>
    <p>Un titre avec une bordure droite en pointillée (dotted)</p>
    <div>Un élément div avec une double bordure droite épaise.</div>
  </body>
</html>

Essayez-vous-même!

Vous pouvez également créer une boîte avec un élément <div> et définir une background-color pour votre boîte et définir la bordure droite.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 300px;
      height: 80px;
      text-align: center;
      padding: 20px;
      background: #ccc;
      border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>Cette boîte a une bordure solide à droit.</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
border-right-width	Définit la largeur de la bordure droite d'é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'élément. La valeur par défaut est "none". Valeur requise.
border-right-color	Définit la couleur de la bordure droite d'élément. La valeur par défaut est la couleur actuelle de texte.
initial	Définit la valeur par défaut.
inherit	Hérite la propriété de l'élément parent.