Générateur de bordures CSS

Corner Radii

Top Left

12px

Top Right

12px

Bottom Right

12px

Bottom Left

12px

Presets

Lock corners together

Preview

Preview Box

CSS Code

border-radius: 12px 12px 12px 12px;

il permet aux utilisateurs de définir visuellement des coins arrondis pour n'importe quel élément HTML et génère instantanément le code de la propriété CSS border-radius — sans avoir à écrire manuellement.

Qu'est-ce que CSS Border Radius ?

Expliquez la propriété CSS border-radius : ce qu'elle fait (arrondit les coins du bord extérieur d'un élément), les quatre coins individuels (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche) et comment les valeurs peuvent être exprimées en px, %, em ou rem. Mentionnez que les quatre peuvent être définis indépendamment pour des conceptions asymétriques.

Comment utiliser le générateur CSS Border Radius

Une section simple étape par étape :

Faites glisser les curseurs pour définir la valeur du rayon pour chaque coin (Haut gauche, Haut droit, Bas droit, Bas gauche).
Activez Verrouiller les coins ensemble pour appliquer un rayon uniforme aux quatre coins à la fois.
Utilisez les boutons prédéfinis pour des formes courantes instantanées : carré net, rectangle arrondi, cercle complet/pilule, ou courbe diagonale.
Observez la zone d'aperçu en direct se mettre à jour en temps réel.
Copiez le code CSS généré en un clic.

Présentation des préréglages de rayon de bordure

Couvrez les quatre préréglages intégrés et leurs cas d'utilisation :

Net (0px) – pour des cartes d'interface utilisateur et des cellules de tableau plates et modernes.
Arrondi (8px) – la convention d'interface utilisateur la plus courante ; utilisé dans les boutons, les cartes, les modales.
Pilule / Cercle (999px) – pour les badges, les étiquettes, les images d'avatar et les boutons CTA.
Diagonale (999px / 0px alterné) – pour des éléments de conception asymétriques créatifs populaires sur les pages de destination.

Contrôle des coins verrouillés par rapport aux coins individuels

Expliquez la différence entre le border-radius uniforme (par exemple, border-radius: 12px) et le raccourci à quatre valeurs (par exemple, border-radius: 12px 0px 12px 0px). Décrivez quand utiliser le mode verrouillé (boutons, cartes) par rapport au mode individuel (bulles de dialogue, blobs organiques, formes d'interface utilisateur personnalisées).

Comprendre la sortie CSS

Décomposez le code généré :

css

border-radius: 12px 12px 12px 12px;

Expliquez l'ordre : en haut à gauche → en haut à droite → en bas à droite → en bas à gauche (dans le sens des aiguilles d'une montre à partir du coin supérieur gauche). Notez les règles de raccourci : si les quatre valeurs sont identiques, une seule valeur suffit (border-radius: 12px).

Cas d'utilisation courants pour CSS Border Radius

Couvrez les applications pratiques du monde réel :

Boutons – un léger arrondi (6–8px) améliore la perception de la cliquabilité.
Cartes et conteneurs – 12–16px est la norme de l'industrie pour les UI SaaS.
Images d'avatar / profil – 50% ou 999px pour les découpes circulaires.
Champs de saisie – arrondi subtil (4–8px) pour une conception de formulaire moderne.
Sections Hero et bannières – rayons asymétriques pour une différenciation visuelle.
Info-bulles et boîtes d'appel – un coin net pointant vers l'élément déclencheur.
Badges et étiquettes – forme de pilule (999px) pour les étiquettes, les catégories et les indicateurs de statut.

CSS Border Radius et compatibilité avec les navigateurs

Notez que border-radius est pris en charge dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) sans préfixes vendeurs. Mentionnez que les projets plus anciens nécessitant une prise en charge d'IE8 peuvent nécessiter les préfixes -webkit-border-radius et -moz-border-radius, bien que ceux-ci soient obsolètes dans le développement actuel.

Conseils pour utiliser Border Radius dans la conception Web

Utilisez des rayons cohérents dans votre système de conception (par exemple, 8px pour les entrées, 12px pour les cartes, 999px pour les pilules).
Évitez de mélanger trop de rayons différents sur une seule page — cela crée une incohérence visuelle.
Pour les interfaces évolutives, préférez les valeurs rem ou em afin que les coins s'adaptent à la taille de police de l'utilisateur.
Combinez border-radius avec overflow: hidden lors du découpage des éléments enfants (par exemple, cartes d'images arrondies).
Utilisez de grandes valeurs asymétriques pour créer des formes de « blob organique », populaires dans les graphiques hero des pages de destination modernes.

Foire aux questions

Qu'est-ce qu'un générateur CSS border radius ?

Un générateur CSS border radius est un outil en ligne gratuit qui vous permet d'ajuster visuellement l'arrondi des coins des éléments HTML et génère instantanément le code CSS border-radius correct, éliminant ainsi le besoin d'écrire ou de deviner les valeurs manuellement.

Comment générer un border radius CSS pour un cercle ?

Définissez les quatre valeurs des coins sur 999px (ou 50% si l'élément est un carré parfait). Le générateur CSS border radius fournit un préréglage en un clic pour cette forme.

Puis-je définir des valeurs de border radius différentes pour chaque coin ?

Oui. Décochez l'option « Verrouiller les coins ensemble » dans le générateur, puis faites glisser chacun des quatre curseurs indépendamment pour définir des valeurs personnalisées pour le coin supérieur gauche, supérieur droit, inférieur droit et inférieur gauche.

Quelles unités puis-je utiliser pour le CSS border radius ?

La propriété border-radius accepte px, %, em, rem et vw/vh. Les plus courantes en pratique sont les px pour les interfaces fixes et les % pour les formes fluides ou circulaires. Ce générateur génère des valeurs en px pour la précision.

Quel est le raccourci CSS pour border radius ?

Le raccourci border-radius: TL TR BR BL définit les quatre coins dans l'ordre des aiguilles d'une montre en commençant par le coin supérieur gauche. Si les quatre valeurs sont égales, vous pouvez écrire une seule valeur : border-radius: 12px.

Le générateur CSS border radius est-il gratuit ?

Oui, l'outil est entièrement gratuit. Aucun compte ou inscription n'est requis. Il suffit d'ajuster les curseurs, de prévisualiser le résultat et de copier le code généré.

Le border-radius fonctionne-t-il sur les images ?

Oui. L'application de border-radius à une balise arrondit ses coins visibles. Pour vous assurer que le contenu enfant (comme une image dans un

) est également découpé, ajoutez overflow: hidden au conteneur parent.

Quelle est la différence entre border-radius et -webkit-border-radius ?

-webkit-border-radius était un ancien préfixe vendeur requis pour Safari et Chrome avant qu'ils n'adoptent la propriété border-radius standard. Les navigateurs modernes n'en ont plus besoin, et vous pouvez utiliser border-radius en toute sécurité sans aucun préfixe.

Comment créer un bouton en forme de pilule à l'aide de CSS border radius ?

Définissez border-radius sur une valeur élevée comme 999px. Cela force des extrémités gauche et droite complètement arrondies, quelle que soit la largeur du bouton, créant ainsi la forme de pilule classique utilisée dans la conception d'interface utilisateur moderne.

Puis-je utiliser CSS border radius pour créer des formes asymétriques ?

Oui. En définissant des valeurs différentes pour chaque coin — par exemple, border-radius: 999px 0 999px 0 — vous pouvez créer des formes diagonales, ondulées ou organiques. Les curseurs de coin individuels du générateur facilitent l'expérimentation visuelle avant de copier le code.