Border-style, propriété CSS
Cette page concerne aussi les propriété(s) physique(s) :
border-top-styleborder-right-styleborder-bottom-styleborder-left-styleEt les propriétés logiques :
border-block-styleborder-block-start-styleborder-block-end-styleborder-inline-styleborder-inline-start-styleborder-inline-end-styleRésumé des caractéristiques de la propriété border-style
none | hidden | groove | double | dashed | dotted | inset | outset | ridge | solidnoneborder-style passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de border-style.
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:
Si une seule valeur est précisée, elle s'applique aux quatre côtés de l'élément.
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.
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.
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).
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.
border-top-styleborder-left-styleborder-right-styleborder-bottom-styleValeurs 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: double;
De nombreux styles de traits sont disponibles pour les bordures.
solid
Un trait simpledouble
Un trait doubledotted
Un trait en pointillé (points)dashed
Un trait en pointillé (tirets)groove
Un trait avec effet 3D
Rainureridge
Un trait avec effet 3D
Bourreletinset
Un trait avec effet 3D
L'élément paraît être en creuxoutset
Un trait avec effet 3D
L'élément paraît être en reliefRemarques :
- Pour les valeurs avec effet 3D :
double,groove,ridge,insetetoutset, 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).
- Pour les valeurs avec effet 3D :
- 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.
- 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).
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.
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
styledans 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é
(
nonedans le cas deborder-style).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('border-style');
Modifier la valeur de la propriété border-style avec 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.
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.
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).
border-style permettant de choisir le style de trait pour les bordures.border-style(propriétés physiques)
border-style(propriétés logiques)
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
Histoire de la propriété border-style.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantborder-style. Définition initiale de la propriété résuméeborder-styleet des propriétés détaillées correspondantes.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantborder-style. Pas de changement sur les propriétés définissant le steyle des bordures, si ce n'est qu'elles acceptent la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Propriétés et valeurs logiques - Niveau 1
Concernantborder-style. Introduction des propriétés logiques (prenant en charge le mode d'écriture en fonction de la langue).18 Mai 2017Document de travail.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Concernantborder-style. Pas de changement concernant ces propriétés.02 Août 2002Document de travail.17 Décembre 2009Candidat à la recommandation.
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 "Module CSS - Arrière-plans et bordures".