Propriété Style borderStyle

Définition et utilisation

borderStyle Cette propriété configure ou retourne le style de bordure de l'élément.

Cette propriété peut accepter une à quatre valeurs :

  • Une valeur, par exemple : p {border-style: solid} - Toutes les quatre bordures sont pleines
  • Deux valeurs, par exemple : p {border-style: solid dotted} - Les bords supérieur et inférieur sont en ligne continue, les bords gauche et droit sont en ligne pointillée
  • Trois valeurs, par exemple : p {border-style: solid dotted double} - La bordure supérieure est en ligne continue, les bords gauche et droit sont en ligne pointillée, la bordure inférieure est en ligne double
  • Quatre valeurs, par exemple : p {border-style: solid dotted double dashed} - La bordure supérieure est en ligne continue, la bordure droite est en ligne pointillée, la bordure inférieure est en ligne double, la bordure gauche est en ligne pointillée

Veuillez également consulter :

Tutoriel CSS :Bordures CSS

Manuel de référence CSS :Propriété border-style

Manuel de référence HTML DOM :Propriété border

Exemple

Exemple 1

Ajoutez un bord solide à l'élément <div> :

document.getElementById("myDiv").style.borderStyle = "solide";

Essayez-le vous-même

Exemple 2

Changez le style des quatre bords de l'élément <div> :

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";

Essayez-le vous-même

Exemple 3

Retourne le style de bord de l'élément <div> :

alert(document.getElementById("myDiv").style.borderStyle);

Essayez-le vous-même

Exemple 4

Demonstration de toutes les valeurs différentes :

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;

Essayez-le vous-même

Syntaxe

Retourner la propriété borderStyle :

object.style.borderStyle

Définir la propriété borderStyle :

object.style.borderStyle = value
Valeur Description
aucun Définit un bord sans bord. Par défaut.
caché Comme "none", mais à l'exception des conflits de bord des éléments de tableau.
point Définit un bord en point.
tiret Définit un bord en tiret.
solide Définit un bord solide.
double Définit deux bords. La largeur des deux bords est la même que la valeur de border-width.
creux Définit le bord en creux 3D. L'effet dépend de border-color valeur.
bosses Définit la bordure en bosses 3D. L'effet dépend de border-color valeur.
rainure Définit le bord en rainure 3D. L'effet dépend de border-color valeur.
saillie Définit le bord en saillie 3D. L'effet dépend de la valeur de border-color.
initial Set this property to its default value. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : Aucun
Valeur de retour : Chaîne, représentant le style de bord de l'élément.
Version CSS : CSS1

Supporte le navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support