Utilitaires

Bordures

Les utilitaires de bordure ajoutent ou retirent des bordures, règlent leur couleur, leur épaisseur et leur opacité, et arrondissent les angles. Les classes rounded-* complètent la page pour les rayons de bordure.

Ajouter une bordure#

border trace les quatre côtés ; border-top, border-end, border-bottom et border-start n’en tracent qu’un.

Tous les côtés

Haut

Fin

Bas

Début

<div class="d-flex flex-wrap gap-3">
  <div class="border p-3">Tous les côtés</div>
  <div class="border-top p-3">Haut</div>
  <div class="border-end p-3">Fin</div>
  <div class="border-bottom p-3">Bas</div>
  <div class="border-start p-3">Début</div>
</div>

Retirer une bordure#

Combinez border avec une classe -0 pour garder trois côtés, ou utilisez border-0 pour supprimer une bordure existante.

Sans haut

Sans fin

Sans bas

Sans début

Sans bordure

<div class="d-flex flex-wrap gap-3">
  <div class="border border-top-0 p-3">Sans haut</div>
  <div class="border border-end-0 p-3">Sans fin</div>
  <div class="border border-bottom-0 p-3">Sans bas</div>
  <div class="border border-start-0 p-3">Sans début</div>
  <div class="border border-0 p-3">Sans bordure</div>
</div>

Couleur de bordure#

Les classes de couleur ne tracent rien seules : ajoutez toujours border.

Primaire

Succès

Information

Avertissement

Danger

Sombre

Clair

Noir

<div class="d-flex flex-wrap gap-3">
  <div class="border border-primary p-3">Primaire</div>
  <div class="border border-success p-3">Succès</div>
  <div class="border border-info p-3">Information</div>
  <div class="border border-warning p-3">Avertissement</div>
  <div class="border border-danger p-3">Danger</div>
  <div class="border border-dark p-3">Sombre</div>
  <div class="border border-light p-3">Clair</div>
  <div class="border border-black p-3">Noir</div>
</div>

Bordures douces#

Primaire

Succès

Avertissement

Danger

<div class="d-flex flex-wrap gap-3">
  <div class="border border-primary-subtle p-3">Primaire</div>
  <div class="border border-success-subtle p-3">Succès</div>
  <div class="border border-warning-subtle p-3">Avertissement</div>
  <div class="border border-danger-subtle p-3">Danger</div>
</div>

Épaisseur et opacité#

10 %

25 %

50 %

75 %

100 %

<div class="d-flex flex-wrap gap-3 mb-3">
  <div class="border border-primary border-1 p-3">1</div>
  <div class="border border-primary border-2 p-3">2</div>
  <div class="border border-primary border-3 p-3">3</div>
  <div class="border border-primary border-4 p-3">4</div>
  <div class="border border-primary border-5 p-3">5</div>
</div>
<div class="d-flex flex-wrap gap-3">
  <div class="border border-primary border-3 border-opacity-10 p-3">10 %</div>
  <div class="border border-primary border-3 border-opacity-25 p-3">25 %</div>
  <div class="border border-primary border-3 border-opacity-50 p-3">50 %</div>
  <div class="border border-primary border-3 border-opacity-75 p-3">75 %</div>
  <div class="border border-primary border-3 border-opacity-100 p-3">100 %</div>
</div>

Angles arrondis#

rounded utilise le rayon standard (5 px). Les niveaux rounded-1 à rounded-5 vont du plus petit au plus grand.

pill

<div class="d-flex flex-wrap gap-3">
  <div class="bg-body-secondary border p-3 rounded-0">0</div>
  <div class="bg-body-secondary border p-3 rounded-1">1</div>
  <div class="bg-body-secondary border p-3 rounded-2">2</div>
  <div class="bg-body-secondary border p-3 rounded-3">3</div>
  <div class="bg-body-secondary border p-3 rounded-4">4</div>
  <div class="bg-body-secondary border p-3 rounded-5">5</div>
  <div class="bg-body-secondary border p-3 rounded-pill">pill</div>
</div>

Arrondir certains côtés#

Haut

Fin

Bas

Début

Fin en pilule

<div class="d-flex flex-wrap gap-3">
  <div class="bg-body-secondary border p-3 rounded-top-3">Haut</div>
  <div class="bg-body-secondary border p-3 rounded-end-3">Fin</div>
  <div class="bg-body-secondary border p-3 rounded-bottom-3">Bas</div>
  <div class="bg-body-secondary border p-3 rounded-start-3">Début</div>
  <div class="bg-body-secondary border p-3 rounded-end-pill">Fin en pilule</div>
</div>

Cercle et pilule#

rounded-circle donne un cercle sur un élément carré et une ellipse sinon. rounded-pill arrondit complètement les extrémités d’un élément allongé.

Épargne

<div class="d-flex flex-wrap align-items-center gap-3">
  <div class="bg-body-secondary border rounded-circle d-flex align-items-center justify-content-center" style="width: 4rem; height: 4rem;">AK</div>
  <div class="bg-body-secondary border rounded-pill px-4 py-2">Épargne</div>
</div>

Classes de bordure

Classes de bordure
Classes	Effet
`border` `border-top` `border-end` `border-bottom` `border-start`	Ajoute une bordure sur tous les côtés ou sur un seul (`--bs-border-width`, `--bs-border-style`, `--bs-border-color`)
`border-0` `border-top-0` `border-end-0` `border-bottom-0` `border-start-0`	Retire la bordure du côté indiqué
`border-primary` `border-secondary` `border-success` `border-danger` `border-warning` `border-info` `border-light` `border-dark` `border-black` `border-white`	Couleur de bordure
`border-primary-subtle` `border-secondary-subtle` `border-success-subtle` `border-danger-subtle` `border-warning-subtle` `border-info-subtle` `border-light-subtle` `border-dark-subtle`	Couleur de bordure atténuée
`border-1` `border-2` `border-3` `border-4` `border-5`	Épaisseur de 1 à 5 px
`border-opacity-10` `border-opacity-25` `border-opacity-50` `border-opacity-75` `border-opacity-100`	Opacité de la couleur de bordure (agit sur `border-primary`, etc.)

Classes d'arrondi

Classes d'arrondi
Classes	Rayon
`rounded`	5 px (`--bs-border-radius`)
`rounded-0`	Aucun arrondi
`rounded-1`	5 px (`--bs-border-radius-sm`)
`rounded-2`	5 px (`--bs-border-radius`)
`rounded-3`	10 px (`--bs-border-radius-lg`)
`rounded-4`	16 px (`--bs-border-radius-xl`)
`rounded-5`	32 px (`--bs-border-radius-xxl`)
`rounded-circle`	50 %
`rounded-pill`	`50rem` (`--bs-border-radius-pill`)
`rounded-top` `rounded-end` `rounded-bottom` `rounded-start`	Arrondi d’un seul côté ; accepte les mêmes suffixes : `rounded-top-0` à `rounded-top-5`, `rounded-top-circle`, `rounded-top-pill`

Variables Sass et CSS

Variables Sass et CSS
Variable	Défaut	Rôle
`$border-width`	`1px`	Épaisseur de la bordure `border`.
`$border-widths`	`1` à `5` (px)	Épaisseurs proposées par `border-1` à `border-5`.
`$border-style`	`solid`	Style de bordure.
`$border-color`	Gris `#dee2e6`	Couleur de bordure par défaut.
`$border-radius`, `$border-radius-sm`	`.3125rem`	Rayon standard et petit.
`$border-radius-lg`, `$border-radius-xl`, `$border-radius-xxl`	`.625rem`, `1rem`, `2rem`	Grands rayons.
`$border-radius-pill`	`50rem`	Rayon de `rounded-pill`.
`$utilities-border`, `$utilities-border-colors`	Issues de `$theme-colors`	Couleurs de `border-*`.
`$utilities-border-subtle`	Teintes `-subtle`	Couleurs de `border-*-subtle`.
`--bs-border-width`, `--bs-border-style`, `--bs-border-color`	Mêmes valeurs	Lues par `border`.
`--bs-border-opacity`	`1`	Opacité modifiée par `border-opacity-*`.
`--bs-border-radius`, `--bs-border-radius-sm`, `-lg`, `-xl`, `-xxl`, `-pill`	Mêmes valeurs	Lues par `rounded-*`.

Bonnes pratiques

À faire

Utilisez border avec une couleur du thème (border-primary) pour marquer un état, avec un texte qui le dit aussi.
Gardez une bordure visible autour des champs et des zones cliquables : elle aide à les repérer.
Pensez à overflow-hidden sur un parent arrondi si son contenu déborde des angles.

À éviter

N’écrivez pas border-primary sans border : aucune bordure n’apparaît.
N’employez pas border-light ou border-white seuls pour délimiter un élément sur fond blanc : le contraste est trop faible.
Ne comptez pas sur rounded-circle pour un élément non carré : il devient une ellipse.

Accessibilité

Une bordure qui délimite un champ ou un bouton doit avoir un contraste d’au moins 3 : 1 avec le fond.
Ne signalez pas une erreur par la seule couleur rouge de la bordure : ajoutez un message.