W3docs
fr
Se connecter

Propriété CSS border-right

La propriété raccourcie CSS border-right définit la largeur, le style et la couleur de la bordure droite d'un élément.

La propriété CSS border-right définit la largeur, le style de ligne et la couleur de la bordure droite d'un élément. C'est une propriété raccourcie qui permet de définir trois propriétés distinctes en une seule déclaration :

Au lieu d'écrire trois règles, vous pouvez en écrire une seule :

/* shorthand */
border-right: 3px solid #1c87c9;

/* equivalent longhand */
border-right-width: 3px;
border-right-style: solid;
border-right-color: #1c87c9;

Les trois valeurs peuvent être spécifiées dans n'importe quel ordre, et une ou deux d'entre elles peuvent être omises. Lorsqu'une valeur est omise, sa valeur par défaut est utilisée :

  • Si le style est omis, la bordure ne s'affiche pas du tout — border-right-style prend par défaut la valeur none, c'est pourquoi vous devez toujours inclure un style pour voir une bordure.
  • Si la largeur est omise, elle prend par défaut la valeur medium.
  • Si la couleur est omise, la bordure prend la valeur color de l'élément ; si celle-ci n'est pas définie non plus, elle revient à la couleur du texte actuel (noir par défaut).

Quand utiliser border-right

Utilisez border-right quand vous souhaitez une ligne sur un seul côté d'une boîte — par exemple, un séparateur vertical entre une barre latérale et le contenu principal, un accent décoratif sur une carte, ou un séparateur en style de soulignement pivoté en colonne. Si vous avez besoin de la même bordure sur les quatre côtés, utilisez plutôt le raccourci border ; pour les autres côtés individuels, consultez border-left, border-top et border-bottom.

Valeur par défautmedium none currentColor
S'applique àTous les éléments. S'applique également à ::first-letter.
HéritéNon
AnimatableOui. La largeur et la couleur sont animatables.
VersionCSS1
Syntaxe DOMobject.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>
Essayez vous-même »

Résultat

![Propriété CSS border-right](/uploads/media/default/0001/03/4218a03bd607afbe39ebf9286536c0c363499170.png "CSS border-right example" =420x)

La propriété border-right peut être appliquée à différents éléments et accepte diverses valeurs de style.

Exemple de la propriété border-right avec plusieurs valeurs :

Exemple de la propriété CSS border-right avec les 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>
Essayez vous-même »

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 élégante.

Exemple d'utilisation de la propriété border-right pour créer une boîte élégante :

Exemple de la propriété CSS border-right avec la valeur 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>
Essayez vous-même »

Conseils et pièges

  • Incluez toujours un style. Écrire uniquement border-right: 2px #1c87c9; n'affiche rien car le style prend par défaut la valeur none. Ajoutez un mot-clé tel que solid.
  • L'ordre est flexible. border-right: solid 5px red; et border-right: 5px solid red; sont équivalents.
  • Le raccourci réinitialise les parties omises. Écrire border-right: 5px solid; réinitialise la couleur à la couleur du texte actuel, même si vous aviez défini border-right-color précédemment. Utilisez les propriétés longues quand vous souhaitez modifier une seule partie sans toucher aux autres.
  • Les bordures s'ajoutent à la taille de mise en page sauf si box-sizing: border-box est défini, car la valeur par défaut content-box ajoute la largeur de la bordure à la largeur totale de l'élément.

Valeurs

Le raccourci accepte les valeurs de ses trois propriétés longues, ainsi que les mots-clés CSS universels :

ValeurDescription
border-right-widthDéfinit la largeur de la bordure droite d'un élément. La valeur par défaut est "medium". Valeur requise.
border-right-styleDéfinit le style de ligne de la bordure droite d'un élément. La valeur par défaut est "none". Valeur requise.
border-right-colorDéfinit la couleur de la bordure droite d'un élément. La valeur par défaut est la couleur actuelle du texte.
initialDéfinit la propriété à sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Pratique

Pratique
Quels attributs peut-on spécifier avec la propriété border-right en CSS ?
Quels attributs peut-on spécifier avec la propriété border-right en CSS ?

Propriétés associées

Was this page helpful?