Attribut border-style CSS

Définition et utilisation

La propriété border-style est utilisée pour définir le style de toutes les bordures d'un élément, ou individuellement pour chaque bord.

Le bord ne peut apparaître que si cette valeur n'est pas none.

Exemple 1

border-style:dotted solid double dashed;
  • Le bord supérieur est en pointillés
  • Le bord droit est en ligne continue
  • Le bord inférieur est en double ligne
  • Le bord gauche est en ligne brisée

Exemple 2

border-style:dotted solid double;
  • Le bord supérieur est en pointillés
  • Le bord droit et le bord gauche sont en ligne continue
  • Le bord inférieur est en double ligne

Exemple 3

border-style:dotted solid;
  • Le bord supérieur et le bord inférieur sont en pointillés
  • Le bord droit et le bord gauche sont en ligne continue

Exemple 4

border-style:dotted;
  • Les 4 bords extérieurs sont en pointillés

Veuillez également consulter :

CSS Tutoriel :Bordure CSS

Manuel de référence HTML DOM :Attribut borderStyle

Exemple

Définir le style des quatre bords :

p
  {
  border-style:solid;
  }

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur Description
none Définit un bord sans bordure.
hidden Est identique à "none", sauf lorsqu'il est appliqué à un tableau, où "hidden" est utilisé pour résoudre les conflits de bordure.
dotted Définit un bord pointillé. Il est généralement représenté comme une ligne continue dans la plupart des navigateurs.
dashed Définit une ligne pointillée. Elle est généralement représentée comme une ligne continue dans la plupart des navigateurs.
solid Définit une ligne continue.
double Définit une double ligne. La largeur de la ligne double est égale à la valeur de border-width.
groove Définit un bord groove 3D. Son effet dépend de la valeur de border-color.
ridge Définit un bord bumpy 3D. Son effet dépend de la valeur de border-color.
inset Définit un bord inset 3D. Son effet dépend de la valeur de border-color.
outset Définit un bord outset 3D. Son effet dépend de la valeur de border-color.
inherit Définit que le style de bord doit être hérité de l'élément parent.

Description

Le style de bord le plus imprévisible est double. Il est défini par deux épaisseurs de ligne plus l'espace entre ces lignes qui doit être égal à la valeur de border-width. Cependant, la norme CSS ne précise pas si l'une des lignes est plus épaisse que l'autre ou si les deux lignes doivent avoir la même épaisseur, ni si l'espace entre les lignes doit être plus large que les lignes elles-mêmes. Tous ces détails sont déterminés par l'agent utilisateur, et les créateurs n'ont aucun impact sur cette décision.

Détails techniques

Valeur par défaut : non spécifié
Héritabilité : non
Version : CSS1
Syntaxe JavaScript : object.style.borderStyle="dotted double"

Plus d'exemples

Définir le style des quatre bords
Cet exemple montre comment définir le style des quatre bords.
Définir des bords différents pour chaque côté
Cet exemple montre comment définir des bords différents pour les côtés d'un élément.

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5