Border

Ouvrir dans ChatGPT

Les propriétés de bordure sont utilisées pour contrôler le style et la largeur de la bordure du composant. Voir les styles de bordure disponibles.

Exemple

.element {
  border: var(--dwc-border-width) var(--dwc-border-style) red;
}

Variables

Variable	Valeur par défaut
--dwc-border-width	1px
--dwc-border-style	solid

Rayon de bordure

Les variables de rayon de bordure définissent l'arrondi des coins d'un composant. Toutes les valeurs sont définies en em, donc elles s'adaptent à la taille de police.

Unité EM

em est une unité relative qui s'adapte à la taille de police du parent.

Exemple

.element {
  border-radius: var(--dwc-border-radius-m);
}

Variables

Variable	Valeur par défaut	Exemple
--dwc-border-radius-2xs	0.071em
--dwc-border-radius-xs	0.125em
--dwc-border-radius-s	0.25em
--dwc-border-radius-m	0.375em
--dwc-border-radius-l	0.5em
--dwc-border-radius-xl	0.75em
--dwc-border-radius-2xl	1em
--dwc-border-radius-round	50%
--dwc-border-radius-pill	9999px
--dwc-border-radius	var(--dwc-border-radius-s)