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
Quelle est la couleur de bordure par défaut ?
black
white
currentColor
text-color
calculée. Il s'agit de la couleur de bordure par défaut.historicColor
.my-element { border: solid hotpink; }
Quelle est la largeur par défaut d'une bordure ?
1px
medium
solid
border-style
, et non d'une valeur border-width
.border-inline: 1px solid
doit...
border-block
serait affiché en haut et en bas.