Bordures

Podcast The CSS – 016: Borders

Dans le module box model (modèle de boîte), nous avons considéré une analogie de frame pour décrire chaque section du modèle de boîte.

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

Propriétés de la bordure

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

Style

Pour qu'une bordure s'affiche, vous devez définir l'élément border-style. Vous avez le choix entre plusieurs options:

Lorsque vous utilisez les styles ridge, inset, outset et groove, le navigateur assombrisse la couleur de bordure de la deuxième couleur affichée afin de fournir un contraste et de la profondeur. Ce comportement peut varier d'un navigateur à l'autre, en particulier pour les couleurs sombres comme black. Dans Chrome, ces styles de bordure seront unis. Dans Firefox, ils seront éclaircis pour donner une seconde 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. La façon dont chaque navigateur affiche les styles dotted et dashed est un exemple courant de cette différence.

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

Raccourci

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

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

L'ordre des valeurs dans le raccourci border est border-width, border-style, puis border-color.

Couleur

Vous pouvez définir une couleur sur tous les côtés du rectangle ou sur chaque côté à l'aide de border-color. Par défaut, la couleur de texte actuelle de la zone est utilisée: currentColor. Cela signifie que si vous ne déclarez que des propriétés de bordure, telles que 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 la zone, 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. Elle est contrôlée par border-width. La largeur de bordure par défaut est de medium. Toutefois, il ne sera visible que si vous définissez un 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 intégré, plutôt qu'aux côtés explicites supérieur, droit, inférieur ou gauche.

Vous pouvez également utiliser des 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é 2px correspondant à la couleur actuelle du texte. La bordure inline-end est alors définie sur 2px, unie et rouge. Cela signifie que dans les langues qui se lisent de gauche à droite (comme l'anglais), la bordure rouge se trouve à droite de la case. Dans les langues qui se lisent de droite à gauche (comme l'arabe), la bordure rouge se trouve sur le côté gauche de la case.

Les navigateurs compatibles varient selon les propriétés logiques des bordures. Assurez-vous donc de vérifier leur compatibilité avant de l'utiliser.

Rayon de courbure (angle de bordure)

Pour arrondir les angles d'une boîte, utilisez la propriété border-radius.

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

Ce raccourci permet d'ajouter une bordure cohérente à chaque coin de votre zone. Comme pour les autres propriétés de bordure, vous pouvez définir l'arrondi de 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 angle avec le raccourci, qui suit l'ordre: 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 valeur unique pour un angle, vous utilisez un autre raccourci, car l'arrondi de bordure est divisé en deux parties : les côtés vertical et horizontal. Cela signifie que lorsque vous définissez border-top-left-radius: 1em, vous définissez le rayon en haut à gauche et en haut à gauche.

Vous pouvez définir les deux propriétés par angle, comme ceci:

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

Cette action ajoute la valeur border-top-left-top de 1em et la valeur border-top-left-left de 2em. Cette action convertit l'arrondi de la bordure supérieure gauche en rayon elliptique, plutôt qu'en arrondi par défaut.

Vous pouvez définir ces valeurs dans le raccourci border-radius, à l'aide d'un / pour définir les valeurs elliptiques, après les valeurs standards. Cela vous permet de faire preuve de créativité et de concevoir des formes complexes.

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

Images de bordure

Il n'est pas nécessaire d'utiliser une bordure basée sur des traits 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, sa largeur, l'écart entre la bordure et le 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 ressemble à 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 l'image de bordure et la zone autour de laquelle elle s'affiche.

border-image-source

La propriété border-image-source (source de l'image de bordure) peut être une url pour toute 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 une propriété utile qui vous permet de diviser une image en neuf parties, composées de quatre lignes divisées. Cela fonctionne comme le raccourci margin, où 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;
}

Une fois les valeurs de décalage définies, l'image ne comporte que neuf sections: quatre coins, quatre bords et une section centrale. Les angles sont appliqués aux coins de l'élément avec l'image de bordure. Les arêtes sont appliquées aux bords de cet élément. La propriété border-image-repeat définit la manière dont ces arêtes remplissent leur espace, et la propriété border-image-width contrôle la taille des secteurs.

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

border-image-repeat

border-image-repeat indique à CSS la façon dont l'image de bordure doit se répéter. Elle 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 tuile les bords de l'image source autant de fois que possible et peut rogner les régions périphériques pour ce faire.
• La valeur round est identique à la répétition, mais au lieu de rogner les régions du bord de l'image pour qu'elles s'adaptent au plus grand nombre possible, elle étire l'image et la répète pour obtenir une répétition fluide.
• La valeur space est à nouveau identique à la répétition, mais cette valeur ajoute de l'espace entre chaque région périphérique pour créer un modèle fluide.

Testez vos connaissances

Tester vos connaissances sur les frontières

.my-element {
  border: solid hotpink;
}