CSS Border

Une bordure est une ligne tracée autour des bords de la boîte d'un élément, entre son rembourrage et sa marge. Les bordures sont l'un des moyens les plus courants de séparer visuellement du contenu, de mettre en valeur une boîte ou de construire des éléments d'interface comme des cartes, des boutons et des champs de saisie.

Chaque bordure possède trois ingrédients, et vous définissez presque toujours les trois ensemble :

width — l'épaisseur de la ligne (par ex. 2px, thin, thick).
style — l'apparence de la ligne (par ex. solid, dashed, dotted). C'est la seule propriété qui doit être présente — sans border-style, le navigateur n'affiche aucune bordure, même si vous définissez une largeur et une couleur.
color — la couleur de la ligne (par ex. red, #1c87c9, rgb(0,0,0)).

Vous pouvez les définir individuellement avec border-width, border-style et border-color, ou tous ensemble avec la propriété raccourcie border. Le reste de ce chapitre passe en revue chaque option.

Exemple de la propriété border :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
    <p style="border:3px dashed #ffff00"> Example with a yellow dashed border.</p>
    <p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Border Width

La propriété border-width définit la largeur d'une bordure.

La largeur peut être spécifiée dans une unité de longueur telle que les pixels (px), em ou rem. Elle peut également être définie avec l'un des trois mots-clés prédéfinis : thin, medium ou thick. La taille exacte de ces mots-clés est laissée au navigateur, mais thin < medium < thick.

Vous ne pouvez pas utiliser border-width seul — il n'a aucun effet visible sans border-style, car le style par défaut est none. Définissez toujours le style (ou utilisez la propriété raccourcie border) en premier.

Vous pouvez également donner à border-width jusqu'à quatre valeurs pour dimensionner chaque côté indépendamment, exactement comme border-style : une valeur définit tous les côtés, deux valeurs définissent les côtés haut/bas et gauche/droite, quatre valeurs définissent le haut, la droite, le bas et la gauche dans le sens des aiguilles d'une montre.

Exemple de la propriété border-width :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-width-1 {
        border-style: solid;
        border-width: 6px;
      }
      p.border-width-2 {
        border-style: dotted;
        border-width: 1px;
      }
        p.border-width-3 {
        border-style: dotted;
        border-width: medium;
      }
      p.border-width-4 {
        border-style: double;
        border-width: 8px;
      }
      p.border-width-5 {
        border-style: double;
        border-width: thick;
      }
      p.border-width-6 {
        border-style: solid;
        border-width: 3px 12px 6px 18px;
      }
    </style>
  </head>
  <body>
    <h2>The border-width Property</h2>
    <p class="border-width-1">Example with border-width.</p>
    <p class="border-width-2">Example with border-width.</p>
    <p class="border-width-3">Example with border-width.</p>
    <p class="border-width-4">Example with border-width.</p>
    <p class="border-width-5">Example with border-width.</p>
    <p class="border-width-6">Example with border-width.</p>
  </body>
</html>

Essayez vous-même »

Border Color

La propriété border-color est utilisée pour définir la couleur d'une bordure. La couleur peut être définie par :

nom — spécifie un nom de couleur, comme "red"
RGB — spécifie une valeur RGB, comme "rgb(255,0,0)"
Hex — spécifie une valeur hexadécimale, comme "#ff0000"

Vous ne pouvez pas utiliser la propriété "border-color" seule. Elle ne fonctionnera pas. Utilisez "border-style" pour définir les bordures en premier.

En général, nous écrivons ces trois propriétés ensemble sur une seule ligne.

Exemple de la propriété border-color :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.color-one {
        border-style: solid;
        border-color: blue;
      }
      p.color-two {
        border-style: dotted;
        border-color: yellow;
      } 
      p.color-three {
        border-style: solid;
        border-color: DarkBlue orange green red;
      } 
    </style>
  </head>
  <body>
    <h2>The border-color Property</h2>
    <p class="color-one">Example with blue solid border-color.</p>
    <p class="color-two">Example with yellow dotted border-color.</p>
    <p class="color-three">Example with multicolor border-color.</p>
  </body>
</html>

Essayez vous-même »

Remarquez le dernier paragraphe : lorsque border-color reçoit quatre valeurs, elles s'appliquent aux côtés haut, droite, bas et gauche dans cet ordre sens des aiguilles d'une montre.

Border Style

La propriété CSS border-style définit le style des quatre côtés des bordures d'un élément. Les bordures sont placées par-dessus l'arrière-plan de l'élément. Elle peut avoir d'une à quatre valeurs, de sorte que chaque côté peut avoir sa propre valeur. La valeur par défaut de border-style est none.

Border-style possède les valeurs suivantes :

dotted
dashed
solid
double
groove
ridge
inset
outset

Voici ce que signifie chaque valeur :

dotted — une série de points ronds.
dashed — une série de courts tirets.
solid — une seule ligne droite. C'est de loin le style le plus courant.
double — deux lignes solides parallèles. La largeur combinée est égale à la valeur border-width.
groove — donne l'impression que la bordure est gravée dans la page (effet 3D).
ridge — le contraire de groove ; la bordure semble ressortir.
inset — fait paraître toute la boîte enfoncée dans la page.
outset — fait paraître la boîte soulevée de la page.

Les effets groove, ridge, inset et outset dépendent de la couleur de la bordure, ils apparaissent donc subtils (ou invisibles) sur une bordure fine ou sur un arrière-plan similaire. Utilisez un border-width d'au moins 3px pour les voir clairement.

CSS Border pour les côtés individuels

CSS fournit des propriétés qui spécifient chaque bordure (droite, gauche, bas et haut).

La propriété border-style peut avoir 4 valeurs, par exemple, border-style: dotted solid double dashed ; où la bordure du haut est en pointillés, la bordure du bas est double, la bordure de droite est solide et la bordure de gauche est en tirets.

La propriété border-style peut avoir 3 valeurs, par exemple, border-style: dotted solid double ; où la bordure du haut est en pointillés, la bordure du bas est double, et les bordures de droite et de gauche sont solides.

La propriété border-style peut avoir 2 valeurs, par exemple, border-style: dotted solid ; où les bordures de droite et de gauche sont solides, et les bordures du haut et du bas sont en pointillés. Et bien sûr, cette propriété peut n'avoir qu'une seule valeur, par exemple, border-style: solid ; où tous les côtés sont solides.

Exemple des propriétés border pour les côtés individuels :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top-style: double;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: groove;
      }
    </style>
  </head>
  <body>
    <p>Example with border individual sides.</p>
  </body>
</html>

Essayez vous-même »

CSS border comme propriété raccourcie

La propriété CSS border est une propriété raccourcie pour les propriétés de bordure individuelles suivantes :

La propriété CSS border-width, qui définit la largeur des quatre côtés de la bordure d'un élément.
La propriété CSS border-style, qui définit le style des quatre côtés des bordures d'un élément.
La propriété CSS border-color, qui définit la couleur des quatre côtés de la bordure d'un élément.

Exemple de la propriété raccourcie border :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.border-all {
        border: 3px solid red;
      }
      p.border-left {
        border-left: 4px solid blue;
        background-color: #dcdcdc;
      }
      p.border-top {
        border-top: 6px solid green;
        background-color: #dcdcdc;
      }
    </style>
  </head>
  <body>
    <h2>The border Shorthand Property</h2>
    <p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
    <p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
    <p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
  </body>
</html>

Essayez vous-même »

Bordures arrondies

Grâce à la propriété CSS border-radius, vous pouvez ajouter des bordures arrondies à un élément.

Exemple de la propriété border-radius :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.normal {
        border: 3px solid blue;
      }
      p.round-one {
        border: 3px solid blue;
        border-radius: 6px;
      }
      p.round-two {
        border: 3px solid blue;
        border-radius: 9px;
      }
      p.round-three {
        border: 3px solid blue;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <h2>The border-radius Property</h2>
    <p class="normal">Example with normal border</p>
    <p class="round-one">Example with round border</p>
    <p class="round-two">Example with rounder border</p>
    <p class="round-three">Example with roundest border</p>
  </body>
</html>

Essayez vous-même »

La différence entre les bordures et les contours

Une bordure et un contour tracent tous deux une ligne autour d'un élément, ce qui prête facilement à confusion. Les principales différences sont :

Une bordure fait partie du modèle de boîte. Elle se situe entre le rembourrage et la marge et occupe de l'espace, donc ajouter une bordure peut déplacer la mise en page des éléments environnants.
Un contour est tracé à l'extérieur de la bordure et ne prend pas d'espace, il ne modifie donc jamais la taille ou la position de l'élément ni de ses voisins.
Une bordure peut avoir un style, une largeur et une couleur différents sur chaque côté. Un contour est identique sur les quatre côtés.
Un contour peut être décalé de l'élément avec outline-offset ; les bordures ne peuvent pas être décalées.

Comme les contours n'affectent pas la mise en page, ils sont couramment utilisés pour l'état :focus des boutons et des liens — l'anneau de focus peut apparaître sans perturber le reste de la page.

Chapitres associés

CSS border-width — contrôler l'épaisseur de chaque côté.
CSS border-style — tous les styles de ligne en détail.
CSS border-color — définir les couleurs par côté.
CSS border-radius — arrondir les coins.
CSS outline — l'alternative à la bordure sans impact sur la mise en page.
CSS padding — l'espace à l'intérieur de la bordure.

Pratique

Lesquelles des propriétés suivantes peuvent être utilisées pour styliser les bordures en CSS ?

border-styleborder-colorborder-radiusborder-widthborder-font