Border - Propriété CSS

border

Résumé des caractéristiques de la propriété `border`

Description rapide

Propriété résumée qui définit l'ensemble des paramètres des bordures.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

Voir les propriétés individuelles.

Héritée par défaut

Non.

Type d'animation

Voir les propriétés individuelles.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

🡇

🡅

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

CSS Logical Properties and Values Level 1

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Cascading Style Sheets specification - Version 1

Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma syntaxique de `border`.

Schéma syntaxique de la propriété border
Les liens du schéma donnent accès à des explications plus détaillées
Télécharger le schéma en SVG

length est une valeur numérique suivie d'une unité de dimension.
color est une couleur exprimée dans n'importa laquelle des syntaxes reconnues par CSS (voir les couleurs CSS).

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 direction et du sens d'écriture.

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-inline-end-width border-block-end-width border-inline-start-width`	`border-width-top border-width-right border-width-bottom border-width-left`
`border-block-start-style border-inline-end-style border-block-end-style border-inline-start-style`	`border-style-top border-style-right border-style-bottom border-style-left`
`border-block-start-color border-inline-end-color border-block-end-color border-inline-start-color`	`border-color-top border-color-right border-color-bottom border-color-left`
`border-block-start border-inline-end border-block-end border-inline-start`	`border-top border-right border-bottom border-left`
`border-block-width border-inline-width`
`border-block-style border-inline-style`
`border-block-color border-inline-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-top

border-left

La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.

border-right

border-bottom

Exemples de syntaxes 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.

Valeurs communes :


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.

Bordure classique : il suffit de définir son épaisseur et son style (la couleur sera la même que celle du texte)

Une bordure avec effet 3D (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).

Bordure en pointillés sur les côtés verticaux et en tirets sur les côtés haut et bas.

Bordure avec effet 3D (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.

Propriété
border

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 108

Baidu Browser

Version testée : 13.18

Chrome

Version testée : 108

Chrome pour Androïd

Version testée : 108

Edge

Version testée : 108

Firefox

Version testée : 108

Firefox pour Androïd

Version testée : 107

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 2.5

Opéra

Version testée : 92

Opéra Mobile

Version testée : 72

QQ Browser

Version testée : 13.1

Safari

Version testée : 16.2

Safari sur IOS

Version testée : 16.2

Samsung Internet

Version testée : 19.0

UC Browser pour Androïd

Version testée : 13.4

Opéra mini

Version testée : Toutes

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `border`.

CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

Définition initiale des propriétés relatives aux bordures et de la propriété résumée border.

17 Novembre 1995
Document de travail.
12 Novembre 1996
Proposé à la recommandation.
17 Décembre 1996
Recommandation.
13 Septembre 2018
Ancienne spécification, déclarée obsolète.
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Pas de changement sur les propriétés définissant les bordures, si ce n'est qu'elles acceptent la valeur inherit.

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Propriétés et valeurs logiques - Niveau 1

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 2017
Document de travail.
Module CSS - Arrière-plans et bordures - Niveau 3

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 2002
Document de travail.
17 Décembre 2009
Candidat à 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 "CSS Backgrounds and Borders Module".