border-style

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Lapropriété raccourcie CSSborder-style permet de définir le style de ligne pour les quatre côtés de la bordure d'un élément.

Exemple interactif

border-style: none;

border-style: dotted;

border-style: inset;

border-style: dashed solid;

border-style: dashed double none;

border-style: dashed groove none dotted;

<section>  <div>    Ceci est une boîte avec une bordure autour.  </div></section>

#example-element {  background-color: #eeeeee;  color: black;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;}body {  background-color: white;}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Syntaxe

css

/* Valeurs avec un mot-clé */border-style: none;border-style: hidden;border-style: dotted;border-style: dashed;border-style: solid;border-style: double;border-style: groove;border-style: ridge;border-style: inset;border-style: outset;/*  côtés horizontaux | côtés verticaux */border-style: dotted solid;/* haut | côtés verticaux | bas */border-style: hidden double dashed;/* haut | droite | bas | gauche */border-style: none solid dotted dashed;/* Valeurs globales */border-style: inherit;border-style: initial;border-style: revert;border-style: revert-layer;border-style: unset;

La propriétéborder-style peut être définie avec une, deux, trois ou quatre valeurs.

Avecune valeur, celle-ci s'applique auxquatre côtés.
Avecdeux valeurs, la première s'applique aux côtéshaut et bas et la seconde aux côtésgauche et droit.
Avectrois valeurs, la première s'applique au côtéhaut, la deuxième aux côtésgauche et droit puis la troisième au côtébas.
Avecquatre valeurs, les valeurs s'appliquent dans le sens des aiguilles d'une montre (la première sur le côtéhaut, la deuxième sur le côtédroit, la troisième sur le côtébas et la quatrième sur le côtégauche).

Chacune des valeurs peut être un des mots-clés parmi la liste suivante.

Valeurs

<line-style>

Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes :

none: L'effet obtenu est le même qu'avechidden : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avecbackground-image), la valeur calculée deborder-width sera0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures,none a la priorité la plusbasse ; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.
hidden: L'effet obtenu est le même qu'avecnone : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avecbackground-image), la valeur calculée deborder-width sera0, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures,hidden ala plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.
dotted: Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié deborder-width.
dashed: Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.
solid: Affiche une ligne droite continue.
double: Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie parborder-width.
groove: La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé àridge.
ridge: La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avecgroove.
inset: La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avecoutset). Lorsqu'elle est appliquée sur une cellule de tableau et queborder-collapse vautcollapsed, cette valeur se comporte commegroove.
outset: La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé àinset). Lorsqu'elle est utilisée sur une cellule de tableau avecborder-collapse qui vautcollapsed, cette valeur se comporte commeridge.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `border-top-style`:`none` `border-right-style`:`none` `border-bottom-style`:`none` `border-left-style`:`none`
Applicabilité	tous les éléments. S'applique aussi à`::first-letter`.
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `border-bottom-style`: comme défini `border-left-style`: comme défini `border-right-style`: comme défini `border-top-style`: comme défini
Type d'animation	discrète

Syntaxe formelle

border-style =
<'border-top-style'>{1,4}

<border-top-style> =
<line-style>

<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset

Exemples

Toutes les valeurs de`border-style`

Voici un exemple utilisant toutes les valeurs de cette propriété.

HTML

html

<pre>none</pre><pre>hidden</pre><pre>dotted</pre><pre>dashed</pre><pre>solid</pre><pre>double</pre><pre>groove</pre><pre>ridge</pre><pre>inset</pre><pre>outset</pre>

CSS

css

pre {  height: 80px;  width: 120px;  margin: 20px;  padding: 20px;  display: inline-block;  background-color: palegreen;  border-width: 5px;  box-sizing: border-box;}/* Voici des classes pour les exemples */.b1 {  border-style: none;}.b2 {  border-style: hidden;}.b3 {  border-style: dotted;}.b4 {  border-style: dashed;}.b5 {  border-style: solid;}.b6 {  border-style: double;}.b7 {  border-style: groove;}.b8 {  border-style: ridge;}.b9 {  border-style: inset;}.b10 {  border-style: outset;}