Border - Propriété CSS
Résumé des caractéristiques de la propriété border
Schéma syntaxique de border.
lengthest une valeur numérique suivie d'une des unités de dimension.colorest une couleur exprimée dans n'importa laquelle des syntaxes reconnues par CSS (voir Les couleurs).
Description de la propriété border.
Une bordure est définie par trois propriétés : l'épaisseur, le type de trait et la couleur du trait. Ces paramètres peuvent être définis globalement pour l'ensemble des quatre côtés, ou au contraire être individualisés pour chacun des traits (en haut, à droite, en bas et à gauche). Ceci explique le nombre important de propriétés relatives aux bordures mais il ne s'agit que des combinaisons des trois paramètres de base et des quatre côtés.
La propriété border définit les trois paramètres (épaisseur, style et couleur) pour les quatre côtés de l'élément. Mais les nombreuses
propriété résumée sont souvent utiles.
Propriétés résumées regroupant les valeurs des trois paramètres pour l'un des côtés :
border-top
border-right
border-bottom
border-left
Propriétés résumées regroupant les valeurs d'un paramètres pour les 4 côtés :
border-color
border-style
border-width
Enfin, les propriétés détaillées, pour définir un des paramètres pour l'un des côtés :
border-width-top
border-width-right
border-width-bottom
border-width-left
border-style-top
border-style-right
border-style-bottom
border-style-left
border-color-top
border-color-right
border-color-bottom
border-color-left
Pour plus d'informations sur les valeurs possibles avec border, reportez-vous aux propriétés border-width, border-style
et border-color.
Attention ! La bordure définie par border peut être masquée si une bordure image est définie par la suite ou avec une priorité
supérieure (voir border-image).
Ne confondez pas bordures et contours. Reportez-vous à la description de la propriété CSS outline pour une présentation détaillée des différences
entre bordures et contours.
Particularités des propriétés résumées.
Le fait que les propriétés résumées définissent toutes les valeurs qui les concerne, même si certaines ne sont pas spécifiées, peut conduire à des résultats surprenants, mais explicables. Ce comportement est commun à toutes les propriétés résumées, pas seulement celles qui concernent les bordures, mais il est particulièrement présent dans le cas des bordures car on utilise principalement des propriétés résumées.
border-color:red;
border:2px solid;
La couleur définie par
border-color est ré-initialisée par la propriété border qui suit :
bien que la couleur ne soit pas spécifiée, elle est remise à sa valeur initiale.
border:2px solid red;
border-top:6px double;
Ce deuxième exemple est encore plus surprenant : la couleur rouge est réinitialisée par
border-top,
alors que le développeur pensait probablement modifier uniquement l'épaisseur et le style de trait.
Prise en charge de la langue.
Les propriétés border-top, border-right, border-bottom, border-left, ainsi que leurs déclinaisons pour
chacun des paramètres de la bordure, peuvent être remplacées par leur équivalent logique si on souhaite que les bordures s'adaptent à la langue du texte.
Les propriétés logiques sont les suivantes, avec leur correspondance avec les propriétés physiques dans le cas des langues latines :
| Propriétés logiques | Propriétés physiques équivalentes pour le latin |
|---|---|
border-block-start-width |
border-width-top |
border-block-start-style |
border-style-top |
border-block-start-color |
border-color-top |
border-block-start |
border-top |
border-block-width |
|
border-block-style |
|
border-block-color |
Mais le plus souvent on se contentera des propriétés résumées regroupant les paramètres pour l'un des bords. Elles sont présentées sur le schéma ci-dessous.
border-topborder-leftborder-rightborder-bottomValeurs pour border.
- border: none;
Valeur par défaut. Aucune bordure n'est tracée autour de l'élément.
- border: solid;
Syntaxe minimale : une bordure est tracée, avec l'épaisseur par défaut (
medium) et la couleur par défaut (currentcolor).Pour connaître les différents types de tracé, reportez-vous à la propriété
border-style. - border: 2px solid green;
Syntaxe complète, décrivant l'épaisseur de la bordure, son type, et sa couleur.
- border: initial; border: inherit; border: revert; border: revertLayer; border: unset;
Ces valeurs sont décrites plus en détail sur leur page respective :
initial,inherit,revert,revert-layer,unset.
Exemples avec la propriété border.
ridge). Pour que l'effet 3D soit correctement restitué, prévoir
une épaisseur suffisante (5 pixels le plus souvent), et une couleur de luminosité intermédiaire (ici du gris).
groove) et avec des coins arrondis (voir border-radius).
Les bordures 3D ne sont pas faciles à restituer avec des coins arrondis : on note des imperfections
dans les arrondis en haut à droite et en bas à gauche.
| 25 | 18 | 14 |
| 8 | 18 | 0 |
| 40 | 0 | 27 |
Bordure à gauche et à droite seulement, avec des coins arrondis. Appliquée à un tableau, cette bordure permet de présenter facilement une matrice telle qu'on la représente habituellement en mathématique.
Prise en charge de border par les navigateurs.
Aucun problème de compatibilité : les bordures sont correctement gérées par les navigateurs depuis très longtemps.
border, qui définit tous les paramètres d'une bordure.borderNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété border.
-
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. Définition initiale des propriétés relatives aux bordures et de la propriété résuméeborder.
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. Pas de changement sur les propriétés définissant les 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. Introduction des propriétés logiques pour définir les bordures. Ces propriétés sont dépendantes du mode d'écriture de la langue utilisée.18 Mai 2017Document de travail.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Concernantborder. Pas de changement concernant directement les propriétés relatives aux bordures, mais les propriétés détaillées ont maintenant un équivalent logique (prenant en charge le mode d'écriture en fonction de la langue).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 arrière-plans et aux bordures sont rassemblées dans la spécification du W3C "Module CSS - Arrière-plans et bordures".