Bordures

Dans le module sur le modèle de boîte, nous avons utilisé une analogie de frame pour décrire chaque section du modèle de boîte.

Trois cadres photo côte à côte.
Le cadre du milieu est surmonté des sections du modèle de boîte

La zone de bordure est le cadre de vos zones, et les propriétés border vous offrent un large éventail d'options pour créer ce cadre dans presque tous les styles imaginables.

Propriétés de la bordure

Les propriétés border individuelles permettent de styliser les différentes parties d'une bordure.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Style

Pour qu'une bordure s'affiche, vous devez définir border-style. Plusieurs options s'offrent à vous:

Lorsque vous utilisez les styles ridge, inset, outset et groove, le navigateur assombrit la couleur de la bordure pour la deuxième couleur affichée afin de créer du contraste et de la profondeur. Ce comportement peut varier d'un navigateur à l'autre, en particulier pour les couleurs sombres telles que black. Dans Chrome, ces styles de bordure s'affichent en couleur unie, et dans Firefox, ils sont éclaircis pour fournir une deuxième couleur plus foncée.

Le comportement du navigateur peut également varier pour d'autres styles de bordure. Il est donc important de tester votre site dans différents navigateurs. Un exemple courant de cette différence est la façon dont chaque navigateur affiche les styles dotted et dashed.

Démonstration de la bordure dans Chrome, Firefox et Safari, qui montre les différences subtiles dans l'affichage des bordures
Bordures affichées dans Chrome, Firefox et Safari.

Pour définir un style de bordure de chaque côté de votre cadre, vous pouvez utiliser border-top-style, border-right-style, border-left-style et border-bottom-style.

Sténographie

Comme pour margin et padding, vous pouvez utiliser la propriété abrégée border pour définir toutes les parties de votre bordure en une seule déclaration.

.my-element {
    border: 1px solid red;
}

L'ordre des valeurs dans l'abréviation border est border-width, border-style, puis border-color.

Couleur

Vous pouvez définir une couleur pour tous les côtés de votre boîte ou pour chaque côté individuellement avec border-color. Par défaut, la couleur du texte est celle de la zone: currentColor. Cela signifie que si vous ne déclarez que des propriétés de bordure, comme la largeur, la couleur sera cette valeur calculée, sauf si vous la définissez explicitement.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

Pour définir une couleur de bordure de chaque côté de votre cadre, utilisez border-top-color, border-right-color, border-left-color et border-bottom-color.

Largeur

La largeur d'une bordure correspond à l'épaisseur de la ligne et est contrôlée par border-width. La largeur de bordure par défaut est medium. Toutefois, cette information ne sera pas visible si vous ne définissez pas de style. Vous pouvez utiliser d'autres largeurs nommées, telles que thin et thick.

Les propriétés border-width acceptent également une unité de longueur telle que px, em, rem ou %. Pour définir la largeur de la bordure de chaque côté de votre cadre, utilisez border-top-width, border-right-width, border-left-width et border-bottom-width.

Propriétés logiques

Dans le module Propriétés logiques, vous avez découvert comment faire référence au flux de blocs et au flux en ligne, plutôt qu'aux côtés supérieur, droit, inférieur ou gauche explicites.

Vous pouvez également utiliser cette fonctionnalité avec les bordures:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

Dans cet exemple, tous les côtés de .my-element sont définis comme ayant une bordure en pointillés 2px, qui correspond à la couleur de texte actuelle. La bordure inline-end est ensuite définie comme 2px, en rouge et en trait plein. Cela signifie que dans les langues de lecture de gauche à droite (comme l'anglais), la bordure rouge se trouve à droite du cadre. Dans les langues qui se lisent de droite à gauche, comme l'arabe, la bordure rouge se trouve à gauche du cadre.

La compatibilité des navigateurs avec les propriétés logiques dans les bordures est variable. Veillez donc à vérifier la compatibilité avant de les utiliser.

Angle de bordure

Pour donner à un cadre des coins arrondis, utilisez la propriété border-radius.

.my-element {
    border-radius: 1em;
}

Ce raccourci ajoute une bordure cohérente à chaque coin de votre zone. Comme pour les autres propriétés de bordure, vous pouvez définir le rayon de la bordure pour chaque côté avec border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius.

Vous pouvez également spécifier le rayon de chaque coin dans la forme abrégée, qui suit l'ordre suivant: en haut à gauche, en haut à droite, en bas à droite, puis en bas à gauche.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

En définissant une seule valeur pour un angle, vous utilisez une autre abréviation, car un rayon de bordure est divisé en deux parties : les côtés verticaux et horizontaux. Cela signifie que lorsque vous définissez border-top-left-radius: 1em, vous définissez le rayon en haut à gauche-en haut et le rayon en haut à gauche-à gauche.

Vous pouvez définir les deux propriétés par coin, comme suit:

.my-element {
    border-top-left-radius: 1em 2em;
}

Cela ajoute une valeur border-top-left-top de 1em et une valeur border-top-left-left de 2em. Cela convertit le rayon de la bordure en haut à gauche en un rayon elliptique, plutôt que le rayon circulaire par défaut.

Vous pouvez définir ces valeurs dans l'abréviation border-radius, à l'aide d'un / pour définir les valeurs elliptiques, après les valeurs standards. Vous pouvez ainsi faire preuve de créativité et créer des formes complexes.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

Images de bordure

Vous n'êtes pas obligé d'utiliser une bordure basée sur un trait en CSS. Vous pouvez également utiliser n'importe quel type d'image à l'aide de border-image. Cette propriété abrégée vous permet de définir l'image source, la façon dont cette image est découpée, la largeur de l'image, la distance à laquelle la bordure est en retrait du bord et la façon dont elle doit se répéter.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

La propriété border-image-width est semblable à border-width : elle permet de définir la largeur de votre image de bordure. La propriété border-image-outset vous permet de définir la distance entre votre image de bordure et le cadre autour duquel elle s'enroule.

border-image-source

border-image-source (source de l'image de bordure) peut être un url pour n'importe quelle image valide, y compris les dégradés CSS.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

La propriété border-image-slice est utile, car elle vous permet de découper une image en neuf parties, composées de quatre lignes de fractionnement. Il fonctionne comme l'abréviation margin, dans laquelle vous définissez la valeur de décalage en haut, à droite, en bas et à gauche.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

Image utilisée dans la démonstration avec les quatre segments représentés par des lignes bleues

Une fois les valeurs de décalage définies, vous disposez de neuf sections de l'image: quatre coins, quatre bords et une section centrale. Les coins sont appliqués aux coins de l'élément avec l'image de bordure. Les bords sont appliqués aux bords de cet élément. La propriété border-image-repeat définit la façon dont ces arêtes remplissent leur espace, et la propriété border-image-width contrôle la taille des tranches.

Enfin, le mot clé fill détermine si la section centrale, laissée par le découpage, est utilisée comme image de fond de l'élément ou non.

border-image-repeat

border-image-repeat vous permet d'indiquer à CSS comment répéter l'image de la bordure. Il fonctionne de la même manière que background-repeat.

  • La valeur initiale est stretch, ce qui étire l'image source pour remplir l'espace disponible dans la mesure du possible.
  • La valeur repeat mosaïque les bords de l'image source autant de fois que possible et peut couper les régions de bordure pour y parvenir.
  • La valeur round est identique à celle de la répétition, mais au lieu de couper les régions de bord de l'image pour les adapter au maximum, elle étire l'image et la répète pour obtenir une répétition fluide.
  • La valeur space est à nouveau identique à celle de la répétition, mais elle ajoute un espace entre chaque région de bordure pour créer un motif homogène.

Vérifier vos connaissances

Tester vos connaissances sur les bordures

Quelle est la couleur de bordure par défaut ?

currentColor
white
historicColor
black
.my-element {
  border: solid hotpink;
}

Quelle est la largeur par défaut d'une bordure ?

solid
1px
medium

border-inline: 1px solid

ajouter des bordures à gauche et à droite (dans les mises en page latines) ;
ajouter des bordures à l'intérieur ;
ajouter des bordures en haut et en bas (dans les mises en page latines).
ajouter des bordures à la première ligne ;