Border

Utilitaires CSS pour appliquer, styliser et supprimer des bordures et des rayons de coin sur n'importe quel élément. Les classes s'appuient sur des variables CSS globales pour garantir la cohérence visuelle.

Stable Utilitaires

Aperçu

LIVE PREVIEW — BORDURES ET RAYONS

.border

.border-top

.border-bottom

.border-left

.border-right

.rounded-pill

.rounded-circle

.border-dashed

.border-dotted

.border-4

.border-double

Structure HTML

CODE HTML

…

👉 Combinaison de classes

Les classes .border-{side}, .border-{style}, .border-{width} et .border-{color} sont indépendantes et se combinent librement sur un même élément.

Classes CSS

Bordures — Côtés

CLASSE	PROPRIÉTÉ APPLIQUÉE	DESCRIPTION
`.border`	`border: var(--border-width) var(--border-style) var(--border-color)`	Bordure sur les quatre côtés.
`.border-top`	`border-top`	Bordure sur le côté supérieur uniquement.
`.border-bottom`	`border-bottom`	Bordure sur le côté inférieur uniquement.
`.border-left`	`border-left`	Bordure sur le côté gauche uniquement.
`.border-right`	`border-right`	Bordure sur le côté droit uniquement.
`.border-y`	`border-top + border-bottom`	Bordures sur les côtés supérieur et inférieur.
`.border-x`	`border-left + border-right`	Bordures sur les côtés gauche et droit.

Bordures — Styles

CLASSE	VALEUR	DESCRIPTION
`.border-solid`	`border-style: solid`	Bordure pleine continue.
`.border-dashed`	`border-style: dashed`	Bordure en tirets.
`.border-dotted`	`border-style: dotted`	Bordure en pointillés.
`.border-double`	`border-style: double`	Bordure double.
`.border-none`	`border-style: none`	Supprime le style de bordure.

Bordures — Épaisseurs

CLASSE	VALEUR
`.border-0`	`border-width: 0`
`.border-1`	`border-width: 1px`
`.border-2`	`border-width: 2px`
`.border-3`	`border-width: 3px`
`.border-4`	`border-width: 4px`
`.border-5`	`border-width: 5px`

Rayons de coin

CLASSE	VALEUR	DESCRIPTION
`.rounded-0`	`border-radius: 0`	Supprime tout rayon de coin.
`.rounded`	`border-radius: var(--border-radius)`	Rayon de coin standard défini par token.
`.rounded-pill`	`border-radius: var(--border-radius-pill)`	Rayon de coin "pilule" (très arrondi).
`.rounded-circle`	`border-radius: var(--border-radius-circle)`	Rayon de coin circulaire (50%).

Suppressions de bordure

CLASSE	DESCRIPTION
`.no-border`	Supprime toutes les bordures (`!important`).
`.no-border-top`	Supprime la bordure supérieure (`!important`).
`.no-border-bottom`	Supprime la bordure inférieure (`!important`).
`.no-border-left`	Supprime la bordure gauche (`!important`).
`.no-border-right`	Supprime la bordure droite (`!important`).
`.no-border-x`	Supprime les bordures gauche et droite (`!important`).
`.no-border-y`	Supprime les bordures supérieure et inférieure (`!important`).

Suppressions de rayon

CLASSE	DESCRIPTION
`.no-radius`	Supprime tous les rayons de coin (`!important`).
`.no-radius-top`	Supprime les rayons des coins supérieurs gauche et droit (`!important`).
`.no-radius-bottom`	Supprime les rayons des coins inférieurs gauche et droit (`!important`).
`.no-radius-left`	Supprime les rayons des coins supérieur gauche et inférieur gauche (`!important`).
`.no-radius-right`	Supprime les rayons des coins supérieur droit et inférieur droit (`!important`).

Variantes

Couleurs de bordure

Les classes .border-{color} sont générées automatiquement depuis la map $colors via @each. Chaque entrée de la map produit une classe utilitaire qui applique la couleur correspondante sur border-color.

COULEUR DE BORDURE HTML

…

ℹ️ Génération dynamique

Les classes .border-{name} sont générées à la compilation Sass via @each $name, $value in $colors. Seules les couleurs déclarées dans colors.$colors produisent une classe.

CSS Custom Properties

TOKEN	RÔLE
`--border-width`	Épaisseur de bordure par défaut, utilisée par `.border` et les variantes directionnelles.
`--border-style`	Style de bordure par défaut (`solid`, `dashed`…), utilisé par `.border` et les variantes directionnelles.
`--border-color`	Couleur de bordure par défaut, utilisée par `.border` et les variantes directionnelles.
`--border-radius`	Rayon de coin standard, utilisé par `.rounded`.
`--border-radius-pill`	Rayon de coin "pilule", utilisé par `.rounded-pill`.
`--border-radius-circle`	Rayon de coin circulaire, utilisé par `.rounded-circle`.

EXEMPLE DE PERSONNALISATION CSS


                    /* Global variables */

                    :root {

                      --border-width: 1px;

                      --border-style: solid;

                      --border-color: #cccccc;

                      --border-radius: 4px;

                      --border-radius-pill: 9999px;

                      --border-radius-circle: 50%;

                    }

Notes & bonnes pratiques

✅ À faire

Combiner .border avec .border-{style} et .border-{width} pour surcharger les valeurs par défaut définies dans les tokens.

✅ À faire

Utiliser les classes .no-border-* et .no-radius-* pour annuler des bordures ou rayons hérités d'un composant parent sans modifier le CSS source.

⚠️ Attention

Les classes .border-{width} (ex : .border-3) modifient uniquement border-width. Elles n'appliquent pas border-style ni border-color — ces propriétés doivent être présentes via .border ou les tokens.

⚠️ Attention

Les classes .no-border* et .no-radius* utilisent !important. Elles écrasent toute déclaration, y compris celles des composants. À utiliser avec précaution dans des contextes fortement stylisés.

Border · WEBDEV-UI DOCS / V1