Border-style, propriété CSS

border-style

Résumé des caractéristiques de la propriété border-style

Description rapide
Type de bordure (solide, double, pointillé...).
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
none | hidden | groove | double | dashed | dotted | inset | outset | ridge | solid
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété border-style passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma de la syntaxe de border-style.

border-style - Syntax DiagramSyntax diagram of the border-style CSS property. See stylescss.free.fr for details. none none hidden hidden solid solid double double dotted dotted dashed dashed groove groove ridge ridge inset inset outset outset {1,4} {1,4}border-style:;border-style:;
Schéma syntaxique de la propriété border-style
Les liens du schéma donne accès à plus de détails

Description de la propriété border-style.

La propriété border-style définit le type de trait utilisé pour les bordures d'un élément (simple, double, pointillé, etc).

La propriété border-style accepte de une à quatre valeurs:

border-style avec une seule valeur
Si une seule valeur est précisée, elle s'applique aux quatre côtés de l'élément.
Deux valeurs pour border-style
Lorsque deux valeurs sont précisées, la première définit le type de bordure en haut et en bas ; la deuxième des bordures gauche et droite.
Trois valeurs pour border-style
Si trois valeurs sont indiquées, la première définit le type de bordure en haut, la deuxième celui des bordures droite et gauche et la dernière le type de la bordure du bas.
Quatre valeurs pour border-style
Enfin, lorsque les quatre valeurs sont indiquées, elles correspondent respectivement aux types des bordures haut, droite, bas et gauche.

Pour une présentation générale des bordures en CSS, voir la propriété résumée border.

Prise en charge de la langue.

Les propriétés dites "logiques" prennent en compte le sens et la direction d'écriture, avec les équivalences suivantes pour les langues latines. Le schéma interactif ci-dessous vous donne la correspondance avec les propriétés physiques suivant la langue utilisée.

border-block-start-style : style de la bordure du côté début de bloc (bordure du haut pour les langues latines).
border-inline-end-style : style de la bordure du côté fin de ligne (bord droit pour les langues latines).
border-block-end-style : style de la bordure du côté fin de bloc (bordure du bas pour les langues latines).
border-inline-start-style : style de la bordure du côté début de ligne (bord gauche pour les langues latines).

   

border-top-style
border-left-style
La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.
border-right-style
border-bottom-style

Il faut ajouter les deux propriété résumée border-block-style et border-inline-style, qui acceptent chacune deux valeurs et permettent de définir en une seule écriture les valeurs pour start et end.

Valeurs pour border-style.

Remarque : la norme ne définit pas la longueur des tirets, ni des espacements entre. De petites différences peuvent donc apparaître d'un navigateur à l'autre. En général, les navigateurs essaient de faire en sorte que les raccordements des tirets dans les angles soient symétriques.

  • border-style: none;

    Valeur par défaut. Pas de bordure.

  • border-style: hidden;

    La bordure est invisible mais son épaisseur est comptée.

  • border-style: double;

    De nombreux styles de traits sont disponibles pour les bordures.

    solid
    Un trait simple
    double
    Un trait double
    dotted
    Un trait en pointillé (points)
    dashed
    Un trait en pointillé (tirets)
    groove
    Un trait avec effet 3D
    Rainure
    ridge
    Un trait avec effet 3D
    Bourrelet
    inset
    Un trait avec effet 3D
    L'élément paraît être en creux
    outset
    Un trait avec effet 3D
    L'élément paraît être en relief

    Remarques :

    • Pour les valeurs avec effet 3D : double, groove, ridge, inset et outset, l'épaisseur doit être au moins de 2 pixels pour que l'effet soit visible. Une épaisseur de 3 pixels est même conseillée pour un rendu plus esthétique.
    • Pour les styles avec effet 3D, les couleurs trop claires ou trop foncées (blanc, noir) dégradent l'effet : choisissez une couleur intermédiaire (gris par exemple).
  • border-style: dotted double; border-style: dotted double dashed; border-style: dotted double dashed solid;

    Plusieurs valeurs peuvent être énumérées, séparées par des espaces. CSS utilise toujours les mêmes règles pour affecter ces valeurs à chacun des quatre bords de l'élément :

    border-style:dotted;

    Quand une seule valeur est présente, elle s'applique aux quatre côtés.

    border-style:dotted double;

    Deux valeurs séparées par un espace. La première s'applique aux traits du haut et du bas, et la deuxième aux traits de droite et de gauche.

    border-style:dotted double dashed;

    Trois valeurs séparées par un espace. La première s'applique au trait du haut, la deuxième aux traits de droite et de gauche, et la dernière au trait du bas.

    border-style:
    dotted double dashed solid;

    Enfin, avec quatre valeurs, on tourne dans le sens des aiguilles d'une montre en partant de la bordure du haut.

Valeurs communes à toutes les propriétés :

border-style: initial (none) border-style: inherit border-style: revert border-style: revertLayer border-style: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de border-style.

L'animation de border-style est brutale : on passe d'une valeur à l'autre sans transition, ce qui est normal puisque la propriété ne prend pas de valeurs numériques.

Accéder à la propriété border-style par programme.

Modifier la valeur de border-style en Javascript.

En Javascript, voici comment modifier la valeur de border-style pour un élément el. Deux syntaxes sont acceptées : elles différent essentiellement sur la façon d'écrire le nom de la propriété :

  • Notation en kebab-case (un tiret pour séparer les mots).
  • Notation en camel-case (une majuscule pour séparer les mots).
Javascript
let el = document.getElementById('id'); el.style['border-style'] = 'double'; // ou let el = document.getElementById('id'); el.style.borderStyle = 'double';

Lire en Javascript la valeur de border-style.

Le code ci-dessous récupère la valeur de la propriété si celle-ci a été affectée directement à l'élément via son attribut style dans le code HTML. La valeur affectée dans la feuille de styles via un sélecteur CSS n'est pas prise en compte par ce code.

Javascript
let el = document.getElementById('id'); let value = el.style['border-style']; // ou let el = document.getElementById('id'); let value = el.style.borderStyle;

Lire la valeur calculée de border-style en Javascript.

La valeur calculée est toujours définie. Elle peut être dans l'ordre :

  • La valeur affectée via l'attribut style dans le code HTML.
  • La valeur affectée dans la feuille de styles via un sélecteur CSS. Si plusieurs valeurs sont affectées par des sélecteurs différents, la valeur calculée résulte de l'application des règles de priorité (voir Les priorités).
  • Enfin, si aucune valeur n'est affectée par l'un des moyens ci-dessus, la valeur calculée est la valeur initiale de la propriété (none dans le cas de border-style).
Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('border-style');

Modifier la valeur de la propriété border-style avec JQuery.

JQuery

$('#id').css('border-style', 'double');
// ou
$('#id').css('borderStyle', 'double');

Lire la valeur calculée de calculée propriété border-style avec JQuery.

JQuery
let value = $('#id').css('border-style');

Testez vous-même.

Pour examiner à quoi ressemblent les valeurs affectée et calculée de border-style, utilisez les boutons ci-dessous.

Exemple interactif avec la propriété border-style.

Le simulateur utilise une bordure de 5 pixels et une couleur de luminosité moyenne, ce qui permet de bien visualiser les effets 3D.

border-style :
Contenu de l'élément

Prise en charge par les navigateurs.

La propriété border-style est correctement prise en charge par tous les navigateurs actuels, aussi bien avec la désignation des bordures physiques (top, right, bottom, left) que logiques (block et inline).

Colonne 1
Support de la propriété border-style permettant de choisir le style de trait pour les bordures.
Colonne 2
Support des propriétés logiques (sensibles au mode d'écriture de la langue) permettant de définir les styles de bordures.
1
border-style
(propriétés physiques)
2
border-style
(propriétés logiques)
Estimation de la prise en charge globale.
96%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Histoire de la propriété border-style.

Voir aussi, au sujet des bordures.

Les descriptions des propriétés relatives aux bordures sont rassemblées dans la spécification du W3C dénommée "CSS Backgrounds and Borders Module".

Propriétés :

background
Résumé des propriétés de l'arrière-plan.
background-attachment
Mode de défilement de l'image d'arrière-plan.
background-clip
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
background-color
Définit la couleur en arrière-plan.
background-image
Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
background-origin
Définit une référence pour positionner l'image d'arrière-plan.
background-position
Définit comment se positionne l'image d'arrière-plan.
background-position-x
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
background-position-y
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
background-repeat
Définit comment est répétée l'image d'arrière-plan.
background-size
Dimensionnement de l'image d'arrière-plan.
border
Propriété résumée qui définit l'ensemble des paramètres des bordures.
border-bottom-left-radius
Définit le rayon de l'angle arrondi en bas à gauche.
border-bottom-right-radius
Définit le rayon de l'angle arrondi en bas à droite.
border-color
Définit la couleur des bordures.
border-image
Résumé des propriétés des bordures réalisées avec des images.
border-image-outset
Définit le débordement de l'image de bordure.
border-image-repeat
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue.
border-image-slice
Définit comment l'image de bordure est découpée.
border-image-source
Définit l'image utilisée pour construire la bordure.
border-image-width
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
border-radius
Rayon des angles arrondis.
border-top-left-radius
Définit le rayon de l'angle arrondi en haut à gauche.
border-top-right-radius
Définit le rayon de l'angle arrondi en haut à droite.
border-width
Définit l'épaisseur de la bordure de l'élément.
box-shadow
Applique un effet d'ombrage sur les blocs en indiquant tous les paramètres : couleur, décalage de l'ombre, flou, etc.