Attribut BORDER-STYLE

Rôle

L’attribut border-style permet de spécifier le type de bordure (trait continu, pointillé..).

Cet attribut peut prendre plusieurs valeurs possibles :

4 valeurs : pour pouvoir différencier les bordures (dans l’ordre) haut-droite-bas-gauche de l’élément HTML

border-style : solid groove dotted double ;

3 valeurs : la première pour la bordure du haut, la deuxième pour les bordures droite-gauche, et la dernière pour la bordure du bas

border-style : solid groove dotted ;

2 valeurs : la première pour les bordures haut-bas, la deuxième pour les bordures droite-gauche

border-style : solid groove ;

1 valeur : pour les quatres bordures

border-style : solid ;

Version : CSS1

Héritage (inherit) : non

Propriété Javascript : element.style.borderStyle

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

div{
  width: 300px;
  padding: 10px;
  border-color: silver;
  border-width: 10px;
  border-style: solid dotted;
}

– Le code HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maxime et reiciendis ullam, accusamus blanditiis iste rerum. Impedit placeat tenetur, aperiam iure dolores quibusdam repellat, alias, nesciunt, </div>

Résultat

Compatibilité

L’attribut border-style est pris en charge par tous les principaux navigateurs

Valeurs

Les différentes valeurs de l’attribut border-style sont:

none

Pas de style : valeur par défaut
Syntaxe :
border-style : none

dotted

Bordure en pointillés
Syntaxe :
border-style : dotted

dashed

Bordure en pointillés différente de la valeur dotted
Syntaxe :
border-style : dashed

solid

Bordure en trait continu
Syntaxe :
border-style : solid

double

Double bordure
Syntaxe :
border-style : double

groove

Bordure rainurée 3D
Syntaxe :
border-style : groove

ridge

Bordure striée 3D
Syntaxe :
border-style : ridge

inset

Bordure encadré 3D
Syntaxe :
border-style : inset

outset

Bordure de départ 3D
Syntaxe :
border-style : outset

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
border-style : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
border-style : inherit

A voir aussi

border box-sizing clip height width margin padding overflowmax-width min-width outline resize