border - Propriété CSS
Résumé des caractéristiques de la propriété border
Description de la propriété border
.
Une bordure est définie par trois propriétés : la couleur, l'épaisseur et le type de 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.
border-width
border-width-top
border-width-right
border-width-bottom
border-width-left
border-style
border-style-top
border-style-right
border-style-bottom
border-style-left
border-color
border-color-top
border-color-right
border-color-bottom
border-color-left
border-top
border-right
border-bottom
border-left
La propriété résumée border
définit les trois paramètres d'une bordure identique pour les quatre côtés.
Pour définir une bordure spécifique à un côté seulement, utilisez les propriétés border-top
, border-right,
border-bottom
et border-left
, dont la syntaxe est identique.
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 direction et du sens d'écriture.
Les quatre propriétés border-top
, border-right
, border-bottom
, border-left
peuvent être remplacées par leur équivalent logique si on souhaite que les bordures s'adaptent en fonction de la langue utilisée.
border-top
border-left
border-right
border-bottom
Exemples de syntaxes pour border
.
length
est une valeur numérique suivie d'une unité de dimension.colour
est une couleur exprimée dans n'importa laquelle des syntaxes reconnues par CSS (voir Object->link}).
- 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.
La valeur initiale est :
Voir les propriétés individuelles.
.
Exemples.
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 par les navigateurs (compatibilité).
Aucun problème de compatibilité : les bordures sont correctement gérées par les navigateurs depuis très longtemps.
border
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
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border
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.