MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

La propriété 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.

/* On applique le même style */
/* aux quatre côtés.         */
border-style: dashed;

/*  côtés horizontaux | côtés verticaux */
border-style: dotted solid;

/* haut | côtés horizontaux | 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: 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.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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é
  • Avec deux valeurs, la première s'applique aux côté 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'applique 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

<br-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, la valeur calculée de border-width sera 0, 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.
hidden
 
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, la valeur calculée de border-width sera 0, 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 que border-collapse vaut collapsed, cette valeur se comporte comme groove.
outset
 

La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à inset). Lorsqu'elle est utilisé sur une cellule de tableau avec border-collapse qui vaut collapsed, cette valeur se comporte comme ridge.

Syntaxe formelle

<br-style>{1,4}


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

Exemples

CSS

/* On définit la mise en forme */
/* du tableau.                 */
table {
    border-width: 3px;
    background-color: #52E396;
}
tr, td {
    padding: 2px;
}

/* 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;}

HTML

<table>
    <tr>
        <td class="b1">none</td>
        <td class="b2">hidden</td>
        <td class="b3">dotted</td>
        <td class="b4">dashed</td>
    </tr>
    <tr>
        <td class="b5">solid</td>
        <td class="b6">double</td>
        <td class="b7">groove</td>
        <td class="b8">ridge</td>
    </tr>
    <tr>
        <td class="b9">inset</td>
        <td class="b10">outset</td>
    </tr>
</table>

Résultat

Spécific​ations

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-style' dans cette spécification.
Candidat au statut de recommandation Aucune modification.
CSS Level 2 (Revision 1)
La définition de 'border-style' dans cette spécification.
Recommendation Ajout de hidden.
CSS Level 1
La définition de 'border-style' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins)[1] (Oui) 4.0 3.5 1.0
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 2.6 1.0 (1.9.2)[1] (Oui) 7.0 (Oui) 3.0

[1] Avant Firefox 50, les styles de bordure pour les coins arrondis (avec border-radius) étaient toujours affichés comme si border-top-style avait la valeur solid. Cela a été corrigé avec Firefox 50.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB, Yuichiro, Mgjbot, Fredchat, Kyodev, VincentN
 Dernière mise à jour par : SphinxKnight,