Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

border-style - Propriété CSS

border-style

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

Description rapide
Type de bordure (simple, double, pointillé...).
Statut
Standard
Type de valeur
Valeur prédéfinie (de 1 à 4 valeurs)
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
Repeatable list : liste répétable.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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:

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 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
La direction et le sens d'écriture de ce texte s'adap­tent à 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.

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:
Schéma syntaxique de la propriété CSS border-styleSyntaxe de border-style, pour définir le type de bordure. none none hidden hidden style style {1,4} {1,4}
;
  • 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
  • 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 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).

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 de border-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.

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 des propriétés physiques pour 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).
Colonne 2
Support des propriétés logiques pour border-style : border-block-start-style, border-inline-end-style, etc. Ces propriétés s'adaptent à la langue.
1
border-style
(Physical)
2
border-style
(Logical)
Estimation de la prise en charge en pourcentage du parc actuel.
96%
90%

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.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.