border-width |
Largeur de bordure |
|---|---|
| Tailwind CSS | |
Classe
| border-width |
Description
Cet utilitaire contrôle l'épaisseur de la bordure d'un élément, influençant sa visibilité et son impact visuel.
Définition
| Classe | Styles |
|---|---|
| border | border-width: 1px; |
| border-<nombre> | border-width: <nombre>px; |
| border-(length:<propriete-personnalisee>) | border-width: var(<propriete-personnalisee>); |
| border-[<valeur>] | border-width: <valeur>; |
| border-x | border-inline-width: 1px; |
| border-x-<nombre> | border-inline-width: <nombre>px; |
| border-x-(length:<propriete-personnalisee>) | border-inline-width: var(<propriete-personnalisee>); |
| border-x-[<valeur>] | border-inline-width: <valeur>; |
| border-y | border-block-width: 1px; |
| border-y-<nombre> | border-block-width: <nombre>px; |
| border-y-(length:<propriete-personnalisee>) | border-block-width: var(<propriete-personnalisee>); |
| border-y-[<valeur>] | border-block-width: <valeur>; |
| border-s | border-inline-start-width: 1px; |
| border-s-<nombre> | border-inline-start-width: <nombre>px; |
| border-s-(length:<propriete-personnalisee>) | border-inline-start-width: var(<propriete-personnalisee>); |
| border-s-[<valeur>] | border-inline-start-width: <valeur>; |
| border-e | border-inline-end-width: 1px; |
| border-e-<nombre> | border-inline-end-width: <nombre>px; |
| border-e-(length:<propriete-personnalisee>) | border-inline-end-width: var(<propriete-personnalisee>); |
| border-e-[<valeur>] | border-inline-end-width: <valeur>; |
| border-t | border-top-width: 1px; |
| border-t-<nombre> | border-top-width: <nombre>px; |
| border-t-(length:<propriete-personnalisee>) | border-top-width: var(<propriete-personnalisee>); |
| border-t-[<valeur>] | border-top-width: <valeur>; |
| border-r | border-right-width: 1px; |
| border-r-<nombre> | border-right-width: <nombre>px; |
| border-r-(length:<propriete-personnalisee>) | border-right-width: var(<propriete-personnalisee>); |
| border-r-[<valeur>] | border-right-width: <valeur>; |
| border-b | border-bottom-width: 1px; |
| border-b-<nombre> | border-bottom-width: <nombre>px; |
| border-b-(length:<propriete-personnalisee>) | border-bottom-width: var(<propriete-personnalisee>); |
| border-b-[<valeur>] | border-bottom-width: <valeur>; |
| border-l | border-left-width: 1px; |
| border-l-<nombre> | border-left-width: <nombre>px; |
| border-l-(length:<propriete-personnalisee>) | border-left-width: var(<propriete-personnalisee>); |
| border-l-[<valeur>] | border-left-width: <valeur>; |
| divide-x | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; } |
| divide-x-<nombre> | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <nombre>px; } |
| divide-x-(length:<propriete-personnalisee>) | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(<propriete-personnalisee>); } |
| divide-x-[<valeur>] | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <valeur>; } |
| divide-y | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; } |
| divide-y-<nombre> | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <nombre>px; } |
| divide-y-(length:<propriete-personnalisee>) | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<propriete-personnalisee>); } |
| divide-y-[<valeur>] | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <valeur>; } |
| divide-x-reverse | --tw-divide-x-reverse: 1; |
| divide-y-reverse | --tw-divide-y-reverse: 1; |
Dernière mise à jour : Vendredi, le 6 février 2026