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 - 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
Type de valeur
Voir les propriétés individuelles.
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)
Statut du document:: CRD (document proposé pour la recommandation)

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
La direction et le sens d'écriture de ce texte s'adap­tent à la langue choisie.
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}).
Syntaxe de borderSchéma syntaxique de la propriété CSS border (tracé de bordures). thin thin medium medium thick thick length length none none hidden hidden solid solid double double dotted dotted dashed dashed groove groove ridge ridge inset inset outset outset colour colourborder:;border:;Télécharger l'image en SVG
  • 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: revert-layer; border: unset;

    La valeur initiale est : Voir les propriétés individuelles..

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.

251814
8180
40027

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.

1
border
Estimation de la prise en charge en pourcentage du parc actuel.
95%

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.

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.
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.
Type de bordure (simple, double, pointillé...).
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.