Bordures

Podcast CSS – 016: Borders

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

La boîte de bordure est le cadre de vos boîtes, Les propriétés border vous offrent un large éventail d'options pour créer ce frame. presque tous les styles auxquels vous pouvez penser.

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 apparaisse, vous devez définir border-style Vous avez le choix entre plusieurs options:

Lorsque vous utilisez les styles ridge, inset, outset et groove : le navigateur assombrit la couleur de bordure de la deuxième couleur affichée afin d'apporter 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 apparaissent uni et dans Firefox, ils sont éclaircis pour donner ensuite une deuxième couleur plus sombre.

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.

</ph>

Pour définir un style de bordure de chaque côté de la boîte : 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 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 la couleur sur tous les côtés de la boîte ou de chaque côté avec border-color Par défaut, la couleur actuelle du texte de la zone est utilisée: currentColor. Ainsi, si vous ne déclarez que des propriétés de bordure, comme la largeur, la couleur sera la 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 boîte, utiliser border-top-color, border-right-color, border-left-color et border-bottom-color.

Largeur

La largeur d'une bordure est l'épaisseur de la ligne et est contrôlée par border-width La largeur de bordure par défaut est medium. Toutefois, elle ne sera pas visible tant que vous n'aurez pas défini 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 bordure de chaque côté de la boîte, utilisez border-top-width, border-right-width, border-left-width et border-bottom-width.

Propriétés logiques

Dans dans le module Propriétés logiques, vous avez appris à faire référence au flux en bloc et au flux intégré, plutôt qu'en haut, à droite, en bas ou à gauche explicites.

Vous bénéficiez également de 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 un 2px, bordure en pointillés qui correspond à la couleur actuelle du texte. La bordure inline-end est ensuite définie sur 2px, continue et rouge. Cela signifie que dans les langues qui s'écrivent de gauche à droite, comme l'anglais, la bordure rouge sera sur le côté droit de la boîte. Dans les langues qui s'écrivent de droite à gauche, comme l'arabe, la bordure rouge sera sur le côté gauche de la boîte.

La prise en charge des navigateurs est variable pour les propriétés logiques des bordures, Vérifiez donc l'assistance avant de l'utiliser.

Angle de bordure

Pour obtenir des coins arrondis dans un cadre, utilisez border-radius.

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

Ce raccourci ajoute une bordure cohérente à chaque angle de votre boîte. Comme pour les autres propriétés de bordure, vous pouvez définir l'arrondi de bordure de chaque côté 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 dans 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 seule valeur pour un angle, vous utilisez un autre raccourci, car un rayon 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 en haut et celui en haut à gauche à gauche.

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

.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 pour 2em. Cela convertit le rayon de la bordure supérieure gauche en rayon elliptique, au lieu du rayon circulaire 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 créer 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 spécifique au trait en CSS. Vous pouvez également utiliser n'importe quel type d'image, border-image Cette propriété abrégée vous permet de définir l'image source, la façon dont l'image est découpée, sa largeur la distance de décalage entre la bordure et le bord, ainsi que la répétition de l'élément.

.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;
}

border-image-width est semblable à border-width: c'est ainsi que vous définissez la largeur de l'image de la bordure. border-image-outset permet de définir la distance entre l'image de bordure et la zone qui entoure la bordure.

border-image-source

border-image-source (source de l'image de bordure) peut être un 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

border-image-slice est une propriété utile qui vous permet de diviser une image en neuf parties, composées de quatre lignes de séparation. Cela fonctionne comme le raccourci margin, dans lequel vous définissez les valeurs 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, vous avez maintenant neuf sections de l'image: quatre coins, quatre bords et une partie centrale. Les angles sont appliqués aux angles de l'élément contenant l'image de bordure. Les arêtes sont appliquées aux bords de cet élément. border-image-repeat définit la manière dont ces arêtes remplissent leur espace et la border-image-width contrôle la taille des secteurs.

Enfin, le mot clé fill détermine si la section du milieu, à gauche du segment, est utilisée ou non comme image de fond de l'élément.

border-image-repeat

border-image-repeat permet d'indiquer au CSS la répétition de l'image de bordure. Son fonctionnement est le même que pour background-repeat.

• La valeur initiale est stretch, ce qui étire l'image source pour remplir l'espace disponible lorsque cela est possible.
• La valeur repeat tue les bords de l'image source autant de fois que possible. et peut rogner les zones périphériques.
• La valeur round est la même que la répétition, mais au lieu de rogner les zones des bords de l'image pour qu'elles s'adaptent au maximum, Elle étire l'image et la répète afin d'obtenir une répétition fluide.
• La valeur space est à nouveau identique à la valeur "repeat", mais cette valeur ajoute de l'espace entre chaque région périphérique pour créer un modèle fluide.

Testez vos connaissances

Testez vos connaissances sur les frontières

.my-element {
  border: solid hotpink;
}