border-radius |
Rayon de bordure |
|---|---|
| Tailwind CSS | |
Classe
| border-radius |
Description
Cet utilitaire définit le rayon d'arrondi des coins d'un élément, permettant d'adoucir ou de styliser sa forme.
Définition
| Classe | Styles |
|---|---|
| rounded-xs | border-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-sm | border-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-md | border-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-lg | border-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-xl | border-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-2xl | border-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-3xl | border-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-4xl | border-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-none | border-radius: 0; |
| rounded-full | border-radius: calc(infinity * 1px); |
| rounded-(<propriete-personnalisee>) | border-radius: var(<propriete-personnalisee>); |
| rounded-[<valeur>] | border-radius: <valeur>; |
| rounded-s-xs | border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */ border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-s-sm | border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */ border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-s-md | border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */ border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-s-lg | border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */ border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-s-xl | border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */ border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-s-2xl | border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */ border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-s-3xl | border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-s-4xl | border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */ border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-s-none | border-start-start-radius: 0; border-end-start-radius: 0; |
| rounded-s-full | border-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px); |
| rounded-s-(<propriete-personnalisee>) | border-start-start-radius: var(<propriete-personnalisee>); border-end-start-radius: var(<propriete-personnalisee>); |
| rounded-s-[<valeur>] | border-start-start-radius: <valeur>; border-end-start-radius: <valeur>; |
| rounded-e-xs | border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */ border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-e-sm | border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */ border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-e-md | border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */ border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-e-lg | border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */ border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-e-xl | border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */ border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-e-2xl | border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */ border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-e-3xl | border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-e-4xl | border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */ border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-e-none | border-start-end-radius: 0; border-end-end-radius: 0; |
| rounded-e-full | border-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px); |
| rounded-e-(<propriete-personnalisee>) | border-start-end-radius: var(<propriete-personnalisee>); border-end-end-radius: var(<propriete-personnalisee>); |
| rounded-e-[<valeur>] | border-start-end-radius: <valeur>; border-end-end-radius: <valeur>; |
| rounded-t-xs | border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */ border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-t-sm | border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */ border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-t-md | border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */ border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-t-lg | border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */ border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-t-xl | border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */ border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-t-2xl | border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */ border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-t-3xl | border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-t-4xl | border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */ border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-t-none | border-top-left-radius: 0; border-top-right-radius: 0; |
| rounded-t-full | border-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px); |
| rounded-t-(<propriete-personnalisee>) | border-top-left-radius: var(<propriete-personnalisee>); border-top-right-radius: var(<propriete-personnalisee>); |
| rounded-t-[<valeur>] | border-top-left-radius: <valeur>; border-top-right-radius: <valeur>; |
| rounded-r-xs | border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */ border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-r-sm | border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */ border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-r-md | border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */ border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-r-lg | border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */ border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-r-xl | border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */ border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-r-2xl | border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */ border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-r-3xl | border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-r-4xl | border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-r-none | border-top-right-radius: 0; border-bottom-right-radius: 0; |
| rounded-r-full | border-top-right-radius: calc(infinity * 1px); border-bottom-right-radius: calc(infinity * 1px); |
| rounded-r-(<propriete-personnalisee>) | border-top-right-radius: var(<propriete-personnalisee>); border-bottom-right-radius: var(<propriete-personnalisee>); |
| rounded-r-[<valeur>] | border-top-right-radius: <valeur>; border-bottom-right-radius: <valeur>; |
| rounded-b-xs | border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */ border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-b-sm | border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */ border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-b-md | border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */ border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-b-lg | border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */ border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-b-xl | border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */ border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-b-2xl | border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */ border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-b-3xl | border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-b-4xl | border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-b-none | border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
| rounded-b-full | border-bottom-right-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); |
| rounded-b-(<propriete-personnalisee>) | border-bottom-right-radius: var(<propriete-personnalisee>); border-bottom-left-radius: var(<propriete-personnalisee>); |
| rounded-b-[<valeur>] | border-bottom-right-radius: <valeur>; border-bottom-left-radius: <valeur>; |
| rounded-l-xs | border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */ border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-l-sm | border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */ border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-l-md | border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */ border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-l-lg | border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */ border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-l-xl | border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */ border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-l-2xl | border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */ border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-l-3xl | border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-l-4xl | border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */ border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-l-none | border-top-left-radius: 0; border-bottom-left-radius: 0; |
| rounded-l-full | border-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); |
| rounded-l-(<propriete-personnalisee>) | border-top-left-radius: var(<propriete-personnalisee>); border-bottom-left-radius: var(<propriete-personnalisee>); |
| rounded-l-[<valeur>] | border-top-left-radius: <valeur>; border-bottom-left-radius: <valeur>; |
| rounded-ss-xs | border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-ss-sm | border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-ss-md | border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-ss-lg | border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-ss-xl | border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-ss-2xl | border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-ss-3xl | border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-ss-4xl | border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-ss-none | border-start-start-radius: 0; |
| rounded-ss-full | border-start-start-radius: calc(infinity * 1px); |
| rounded-ss-(<propriete-personnalisee>) | border-start-start-radius: var(<propriete-personnalisee>); |
| rounded-ss-[<valeur>] | border-start-start-radius: <valeur>; |
| rounded-se-xs | border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-se-sm | border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-se-md | border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-se-lg | border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-se-xl | border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-se-2xl | border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-se-3xl | border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-se-4xl | border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-se-none | border-start-end-radius: 0; |
| rounded-se-full | border-start-end-radius: calc(infinity * 1px); |
| rounded-se-(<propriete-personnalisee>) | border-start-end-radius: var(<propriete-personnalisee>); |
| rounded-se-[<valeur>] | border-start-end-radius: <valeur>; |
| rounded-ee-xs | border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-ee-sm | border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-ee-md | border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-ee-lg | border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-ee-xl | border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-ee-2xl | border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-ee-3xl | border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-ee-4xl | border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-ee-none | border-end-end-radius: 0; |
| rounded-ee-full | border-end-end-radius: calc(infinity * 1px); |
| rounded-ee-(<propriete-personnalisee>) | border-end-end-radius: var(<propriete-personnalisee>); |
| rounded-ee-[<valeur>] | border-end-end-radius: <valeur>; |
| rounded-es-xs | border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-es-sm | border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-es-md | border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-es-lg | border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-es-xl | border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-es-2xl | border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-es-3xl | border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-es-4xl | border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-es-none | border-end-start-radius: 0; |
| rounded-es-full | border-end-start-radius: calc(infinity * 1px); |
| rounded-es-(<propriete-personnalisee>) | border-end-start-radius: var(<propriete-personnalisee>); |
| rounded-es-[<valeur>] | border-end-start-radius: <valeur>; |
| rounded-tl-xs | border-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-tl-sm | border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-tl-md | border-top-left-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-tl-lg | border-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-tl-xl | border-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-tl-2xl | border-top-left-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-tl-3xl | border-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-tl-4xl | border-top-left-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-tl-none | border-top-left-radius: 0; |
| rounded-tl-full | border-top-left-radius: calc(infinity * 1px); |
| rounded-tl-(<propriete-personnalisee>) | border-top-left-radius: var(<propriete-personnalisee>); |
| rounded-tl-[<valeur>] | border-top-left-radius: <valeur>; |
| rounded-tr-xs | border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-tr-sm | border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-tr-md | border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-tr-lg | border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-tr-xl | border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-tr-2xl | border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-tr-3xl | border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-tr-4xl | border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-tr-none | border-top-right-radius: 0; |
| rounded-tr-full | border-top-right-radius: calc(infinity * 1px); |
| rounded-tr-(<propriete-personnalisee>) | border-top-right-radius: var(<propriete-personnalisee>); |
| rounded-tr-[<valeur>] | border-top-right-radius: <valeur>; |
| rounded-br-xs | border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-br-sm | border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-br-md | border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-br-lg | border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-br-xl | border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-br-2xl | border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-br-3xl | border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-br-4xl | border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-br-none | border-bottom-right-radius: 0; |
| rounded-br-full | border-bottom-right-radius: calc(infinity * 1px); |
| rounded-br-(<propriete-personnalisee>) | border-bottom-right-radius: var(<propriete-personnalisee>); |
| rounded-br-[<valeur>] | border-bottom-right-radius: <valeur>; |
| rounded-bl-xs | border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */ |
| rounded-bl-sm | border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
| rounded-bl-md | border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */ |
| rounded-bl-lg | border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */ |
| rounded-bl-xl | border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */ |
| rounded-bl-2xl | border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */ |
| rounded-bl-3xl | border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
| rounded-bl-4xl | border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */ |
| rounded-bl-none | border-bottom-left-radius: 0; |
| rounded-bl-full | border-bottom-left-radius: calc(infinity * 1px); |
| rounded-bl-(<propriete-personnalisee>) | border-bottom-left-radius: var(<propriete-personnalisee>); |
| rounded-bl-[<valeur>] | border-bottom-left-radius: <valeur>; |
Dernière mise à jour : Vendredi, le 6 février 2026