Propriété CSS border-right-style

La propriété CSS border-right-style est utilisée pour définir le style de la bordure droite d'un élément. Elle est définie comme un mot-clé unique choisi parmi ceux disponibles pour la propriété border-style. La border-style permet de définir le style pour les quatre côtés d'un élément, tandis que border-right-style définit un style uniquement pour la bordure droite.

La largeur par défaut de la bordure droite est medium. Elle peut être modifiée en utilisant soit la border-right-width, soit la border-width.

Tous les navigateurs ne rendent pas les styles de la même manière. Chrome affiche actuellement les points sous forme de rectangles, et non de cercles.

INFO

La spécification ne précise pas la quantité d'espacement entre les points et les tirets.

INFO

La spécification ne définit pas comment les bordures de styles différents se connectent dans les coins.

Valeur initiale	none
S'applique à	Tous les éléments. Il s'applique également à ::first-letter.
Héritée	Non
Animable	Non
Version	CSS1
Syntaxe DOM	object.style.borderRightStyle = "dashed";

Syntaxe

Syntaxe de la propriété CSS border-right-style

css

border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemple de la propriété border-right-style :

Exemple de la propriété CSS border-right-style avec les valeurs solid et dotted

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-right-style: solid;
      }
      p {
        border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>A Heading with solid border-right-style.</h2>
    <p>A paragraph with dotted border-right-style.</p>
  </body>
</html>

Try it Yourself »

Consultez un exemple où toutes les valeurs de style sont utilisées pour observer les différences entre elles :

INFO

En fonction de la valeur de border-color, les effets des valeurs groove, ridge, inset et outset peuvent être modifiés.

Exemple de la propriété border-right-style avec toutes les valeurs :

Exemple de la propriété CSS border-right-style avec les valeurs hidden, dotted, dashed, solid, double, groove, ridge, inset et outset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #c9c5c5;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #1c87c9;
        border: 10px solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-style example classes */
      .b1 {
        border-right-style: hidden;
      }
      .b2 {
        border-right-style: dotted;
      }
      .b3 {
        border-right-style: dashed;
      }
      .b4 {
        border-right-style: solid;
      }
      .b5 {
        border-right-style: double;
      }
      .b6 {
        border-right-style: groove;
      }
      .b7 {
        border-right-style: ridge;
      }
      .b8 {
        border-right-style: inset;
      }
      .b9 {
        border-right-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS border-right-style

Valeurs

Valeur	Description	Tester »
none	Définit qu'il n'y aura pas de bordure. Valeur par défaut.	Tester »
hidden	Similaire à "none" sauf pour la résolution des conflits de bordure dans les éléments de tableau.	Tester »
dotted	Définit une bordure en pointillés.	Tester »
dashed	Définit une bordure en tirets.	Tester »
double	Définit une bordure double.	Tester »
solid	Définit une bordure pleine.	Tester »
groove	Définit une bordure en 3D en creux. Son effet peut être modifié avec la valeur de border-color.	Tester »
ridge	Définit une bordure en 3D en relief. Son effet peut être modifié avec la valeur de border-color.	Tester »
inset	Définit une bordure en 3D enfoncée. Son effet peut être modifié avec la valeur de border-color.	Tester »
outset	Définit une bordure en 3D saillante. Son effet peut être modifié avec la valeur de border-color.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Propriété CSS border-right-style ​

Syntaxe ​

Exemple de la propriété border-right-style : ​

Exemple de la propriété border-right-style avec toutes les valeurs : ​

Résultat ​

Valeurs ​

Pratique ​

Propriété CSS border-right-style

Syntaxe

Exemple de la propriété border-right-style :

Exemple de la propriété border-right-style avec toutes les valeurs :

Résultat

Valeurs

Pratique