border-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété CSS border-style
est une propriété raccourcie qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.
Exemple interactif
Propriétés détaillées correspondantes
Cette propriété est une propriété raccourcie pour les propriétés CSS :
Syntaxe
/* 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: unset;
Note : La valeur par défaut de border-style
est none
. Cela signifie que si on modifie border-width
et border-color
, on ne verra pas la bordure tant que cette propriété n'est pas différente de none
ou de hidden
.
La propriété border-style
peut être définie avec une, deux, trois ou quatre valeurs :
- Avec une valeur, celle-ci s'applique aux quatre côtés.
- Avec deux valeurs, la première s'applique aux côtés haut et bas et la seconde aux côtés gauche et droit.
- Avec trois valeurs, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas.
- Avec quatre 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'avec
hidden
: 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 plus basse ; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée. -
L'effet obtenu est le même qu'avec
none
: 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
a la 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é de
border-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 par
border-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 avec
groove
. 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 avec
outset
). 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 :
|
---|---|
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 :
|
Type d'animation | discrète |
Syntaxe formelle
Exemples
Toutes les valeurs de border-style
Voici un exemple utilisant toutes les valeurs de cette propriété.
HTML
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>
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;
}
Résultat
Spécifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-style |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Les autres propriétés raccourcies liées aux bordures :
border
,border-width
,border-color
,border-radius