border-style - Propriété CSS
Résumé des caractéristiques de la propriété border-style
none
| hidden
| groove
| double
| dashed
| dotted
| inset
| outset
| ridge
| solid
none
Description.
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 du mode d'écriture en fonction 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
border-inline-end-style
border-block-end-style
border-inline-start-style
border-top-style
border-left-style
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
.
Syntaxes pour border-style
.
style
est un style de bordure : solid
, double
, dashed
, etc.
De un a quatre styles peuvent être cités pour traiter séparément chacun des bords.
border-style:
;
- 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 relief - 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
; border-style:inherit
; border-style:revert
; border-style:revert-layer
; border-style:unset
;La valeur initiale est :
.none
Remarques :
- Pour les valeurs avec effet 3D :
double
,groove
,ridge
,inset
etoutset
, 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).
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.
Manipulation de la propriété border-style
par programme.
Les exemples de code travaillent sur l'élément ci-dessous (cercle bleu).
Remarque : les autres paramètres de bordure (border-color
et border-width
) sont déjà définis.
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).
function setBorderStyle(el) {
el.style['border-style']='double';
// ou
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.
function getBorderStyle(el) {
alert(el.style['border-style']);
// ou
alert(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 règles de priorité).
- Enfin, si aucune valeur n'est affectée par l'un des moyens ci-dessus, la valeur calculée est la valeur par défaut de la propriété
(
none
dans le cas deborder-style
).
function getCalcBorderStyle(el) {
alert(window.getComputedStyle(el).getPropertyValue('border-style'));
}
Modifier la valeur de la propriété border-style
avec JQuery.
function setBorderStyle(el) {
$(el).css('border-style','dotted');
// ou
$(el).css('borderStyle','dotted');
}
Lire la valeur calculée de la propriété border-style
avec JQuery.
function getCalcBorderStyle(el) {
alert($(el).css('border-style'));
// ou
alert($(el).css('borderStyle'));
}
Exemple interactif.
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
: border-top-style
, border-right-style
, etc.
Les propriétés physiques ne prennent pas en compte les particularités de la langue (direction et sens d'écriture).
border-style
: border-block-start-style
, border-inline-end-style
, etc.
Ces propriétés s'adaptent à la langue.
border-style
(Physical)
border-style
(Logical)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que border-style
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-style
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.