border-radius: 16px 16px 16px 16px;
width: 200px;
height: 200px;

Générateur en ligne gratuit de rayon de bordure — Éditeur visuel CSS

Créez des valeurs CSS border-radius personnalisées visuellement. Concevez des coins arrondis, des boutons en forme de pilule, des formes organiques et des formes créatives avec un aperçu en temps réel et une sortie CSS instantanée.

Qu'est-ce qu'un générateur de rayon de bordure ?

Un générateur de rayon de bordure est un outil visuel qui aide les concepteurs web à créer des valeurs CSS border-radius sans avoir à calculer manuellement les valeurs en pixels ou en pourcentages. Au lieu de taper des chiffres et de rafraîchir votre navigateur, vous ajustez des curseurs et voyez la forme changer en temps réel.

La propriété CSS border-radius arrondit les coins d'un élément. C'est l'une des propriétés CSS les plus polyvalentes — capable de créer tout, des coins arrondis subtils à des formes organiques complexes.

Comment utiliser ce générateur de rayon de bordure

1. Choisissez un modèle prédéfini — Commencez par des formes arrondies, pilule, blob, feuille, goutte ou morph.
2. Ajustez les curseurs — Contrôlez chaque coin indépendamment ou les reliez ensemble.
3. Définissez les dimensions — Changez la largeur et la hauteur pour correspondre à votre élément.
4. Personnalisez les couleurs — Définissez la couleur de la boîte et le fond de l'aperçu.
5. Copiez le CSS — Cliquez sur le bouton Copier et collez dans votre feuille de style.

Fonctionnalités clés

Fonctionnalité	Avantage
Contrôle des coins individuels	Définir chaque coin indépendamment pour des formes uniques
Relier/délier les coins	Basculer entre des coins uniformes et personnalisés
6 modèles prédéfinis	Démarrer rapidement avec des motifs de border-radius courants
Contrôles de largeur et de hauteur	Correspondre aux dimensions réelles de votre élément
Aperçu en temps réel	Voir la forme mise à jour instantanément pendant l'ajustement
Copier dans le presse-papiers	Exportation d'une seule clic de CSS

Comprendre le rayon de bordure CSS

La syntaxe

La propriété border-radius accepte jusqu'à quatre valeurs, une pour chaque coin :

border-radius: top-left top-right bottom-right bottom-left;

Modèle de valeur	Coins affectés
16px	Tous les quatre coins de manière égale
16px 8px	Top-left + bottom-right / top-right + bottom-left
16px 8px 4px	Top-left / top-right + bottom-left / bottom-right
16px 8px 4px 2px	Chaque coin individuellement

Pixels vs Pourcentages

• Pixels (px) : Rayon de coin fixe indépendamment de la taille de l'élément.
• Pourcentages (%) : Relatifs aux dimensions de l'élément. 50% sur un carré crée un cercle parfait ; 50% sur un rectangle crée une ellipse.

Utilisation des pourcentages pour les cercles et les pilules

Un border-radius: 50% crée un cercle parfait lorsque la largeur égale la hauteur. Pour les boutons en forme de pilule, utilisez une valeur de pixel élevée (comme 999px) — cela garantit que le rayon dépasse toujours la moitié de la dimension la plus courte, créant des extrémités entièrement arrondies indépendamment de la taille de l'élément.

Comparaison des modèles prédéfinis

Modèle	Valeurs	Cas d'utilisation
Arrondi	16px uniforme	Cartes, modales, images
Pilule	999px uniforme	Boutons, étiquettes, badges
Blob	60px 40px 70px 30px	Éléments décoratifs, sections héro
Feuille	0 100px 0 100px	Éléments d'interface organique, diviseurs décoratifs
Goutte	0 100px 100px 0	Info-bulles, appels à l'action, pointeurs
Morph	30px 70px 50px 80px	Formes abstraites, arrière-plans

Cas d'utilisation réels

Style des boutons

Créez des boutons en forme de pilule avec border-radius: 999px pour un look moderne et amical utilisé par la plupart des systèmes de design.

Composants de carte

Un arrondi subtil (8–16px) adoucit les bords des cartes et crée une hiérarchie visuelle sans être distrayant.

Avatars de profil

Utilisez border-radius: 50% sur des images carrées pour créer des avatars circulaires, courants dans les applications sociales et les tableaux de bord.

Blobs décoratifs

Des valeurs asymétriques de rayon sur de grands éléments d'arrière-plan créent des formes organiques populaires dans le design web moderne.

Info-bulles personnalisées

Utilisez des valeurs mixtes (ex. 8px 8px 8px 0) pour créer une info-bulle avec un coin aigu pointant vers l'élément déclencheur.

Conseils pour un meilleur rayon de bordure

Conseil	Explication
Restez cohérent	Utilisez le même rayon à travers votre système de design (ex. 8px pour petits, 16px pour grands).
Utilisez des unités relatives	Pour des cercles réactifs, utilisez 50% au lieu d'une valeur fixe en pixel.
Valeurs élevées pour les pilules	Utilisez 9999px ou 999px pour garantir des extrémités entièrement arrondies.
Évitez les surcharges	N'utilisez pas de valeurs excessivement élevées si cela n'est pas nécessaire.
Testez sur plusieurs écrans	Vérifiez comment les formes apparaissent à différentes résolutions.

Questions fréquemment posées

Qu'est-ce qui se passe lorsque le rayon de bordure est plus grand que l'élément ?

Si le rayon de bordure est plus grand que la taille de l'élément, l'élément sera entièrement arrondi. Par exemple, un border-radius: 50% sur un carré crée un cercle parfait.

Puis-je utiliser des pourcentages avec des unités absolues ?

Oui, vous pouvez combiner des pourcentages et des unités absolues. Par exemple, border-radius: 50px 20% arrondit les coins gauche et droit à 50px et les coins haut et bas à 20% de la hauteur de l'élément.

Quels sont les effets de border-radius sur les éléments flexibles ?

Sur les éléments flexibles, border-radius affecte les coins de manière cohérente, indépendamment de la direction de flexion. Les coins restent arrondis même lorsqu'ils sont redimensionnés.

Puis-je utiliser border-radius avec des ombres ?

Oui, border-radius fonctionne bien avec les ombres. Les ombres s'adaptent aux coins arrondis, créant un effet visuel harmonieux.

Y a-t-il des limites à l'utilisation de border-radius ?

border-radius peut être utilisé sur n'importe quel élément HTML, mais les résultats peuvent varier selon le navigateur et la version du CSS supportée. Il est recommandé de tester sur les principaux navigateurs.