Générateur de bord arrondi CSS — Outil en ligne gratuit

Qu'est-ce que Générateur de bord arrondi CSS ?

Générateur de bord arrondi CSS gratuit en ligne. Ajustez les rayons des quatre coins avec des contrôles visuels.

La propriété CSS border-radius contrôle l’arrondi des coins d’un élément, et sa polyvalence va bien au-delà des simples rectangles arrondis. En ajustant chaque coin indépendamment, vous pouvez créer des pilules, des cercles, des formes asymétriques et des formes organiques complexes — tout cela avec une seule propriété CSS. CSS Border Radius Generator fournit un contrôle par curseur individuel pour les quatre coins, avec un aperçu en direct qui se met à jour instantanément.

Chaque coin — haut-gauche, haut-droit, bas-droit, bas-gauche — a son propre curseur, vous permettant de créer des formes totalement asymétriques. Le sélecteur d’unité entre pixels (px) et pourcentage (%) change considérablement le comportement. Les valeurs en pixels créent des coins à rayon fixe qui restent de la même taille quelles que soient les dimensions de l’élément. Les valeurs en pourcentage lient le rayon à la taille de l’élément, c’est ainsi que l’on crée des cercles parfaits (border-radius: 50 % sur un carré).

Quatre préréglages couvrent les cas d’utilisation les plus courants. Circle crée border-radius: 50 % pour un cercle parfait (ou une ellipse sur les éléments non carrés). Pill crée une forme aux extrémités entièrement arrondies (border-radius: 9999px), utile pour les badges de boutons et les étiquettes. Card applique un arrondi subtil de 8 px adapté aux composants de cartes et aux conteneurs. Rounded applique un arrondi de 8 px sur tous les coins, adapté aux boutons et aux champs de formulaire.

Le code CSS généré affiche la syntaxe abrégée. Si les quatre coins ont la même valeur, il affiche une valeur unique (par exemple, border-radius: 8px). Si les coins diffèrent, il affiche la syntaxe à quatre valeurs dans l’ordre horaire (haut-gauche, haut-droit, bas-droit, bas-gauche). Le code est prêt à copier dans votre feuille de style.

Cas d'utilisation réels de Générateur de bord arrondi CSS

Création d’un bouton arrondi en forme de pilule

Votre système de design utilise des boutons en forme de pilule de 24 px de hauteur avec des extrémités entièrement arrondies. Sélectionnez le préréglage « Pill » pour border-radius: 9999px. L’aperçu du bouton montre la forme de pilule. Copiez le CSS et appliquez-le à votre composant bouton. Ajustez les valeurs des coins individuellement si vous souhaitez un aspect plus doux.

Conception d’une forme asymétrique pour une section hero

Une page d’accueil hero a besoin d’une forme distinctive : haut-gauche à 0 px, haut-droit à 40 px, bas-droit à 0 px, bas-gauche à 40 px. Réglez chaque curseur de coin indépendamment. L’aperçu montre une forme asymétrique unique. Le CSS généré est border-radius: 0 40px 0 40px.

Création d’un avatar circulaire avec un rayon en pourcentage

Un avatar utilisateur est une image carrée de 64 × 64 pixels. Basculez l’unité sur % et réglez les quatre coins à 50 %. L’aperçu montre un cercle parfait. Le CSS généré est border-radius: 50 %, qui fonctionne sur tout élément carré, quelle que soit sa taille.

Pourquoi utiliser Générateur de bord arrondi CSS ?

Contrôle individuel des 4 coins
Bascule entre px et %
Aperçu en direct
4 préréglages : Cercle, Pilule, Carte, Arrondi

Comment utiliser Générateur de bord arrondi CSS — Guide pas à pas

Ajustez les curseurs pour chaque coin (haut-gauche, haut-droit, bas-droit, bas-gauche).

Basculez entre les unités px et %.

Aperçu en direct du rayon de bordure.

Copiez le code CSS.

À qui Générateur de bord arrondi CSS est-il destiné ?

Conception UI
Conception de boutons
Conception de cartes
Développement web

Conseils de pro pour Générateur de bord arrondi CSS

1Utilisez des valeurs en pixels pour les éléments de taille fixe (boutons, cartes) où le rayon des coins doit rester constant. Utilisez des valeurs en pourcentage pour les éléments réactifs où le rayon doit s’adapter à la taille de l’élément.
2Le préréglage « Pill » utilise une valeur en pixels très élevée (9999px) plutôt que 50 %, car 50 % sur un rectangle crée une ellipse, pas une pilule. La valeur élevée en pixels garantit des extrémités entièrement arrondies sur tout élément rectangulaire.
3Pour un « squircle » (carré aux coins légèrement arrondis, populaire dans iOS), utilisez environ 10 à 12 % de border-radius sur tous les coins. Cela crée un aspect plus doux que les petites valeurs en pixels.
4Avec les valeurs en pourcentage, le rayon est calculé par rapport à la largeur de l’élément (pour la gauche et la droite) et à sa hauteur (pour le haut et le bas). Des pourcentages différents sur les coins horizontaux et verticaux créent des coins elliptiques.

Générateur de bord arrondi CSS — Questions fréquentes

What is border-radius in CSS?

border-radius rounds the corners of an element. It accepts 1-4 values for each corner. For example, border-radius: 10px 20px 30px 40px sets top-left, top-right, bottom-right, and bottom-left respectively.

How to make a circle with CSS?

Set border-radius: 50% on a square element (equal width and height). This creates a perfect circle.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Générateur de bord arrondi CSS really free to use?

Yes, Générateur de bord arrondi CSS is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Prêt à utiliser Générateur de bord arrondi CSS ?

Outil en ligne gratuit — fonctionne dans votre navigateur, sans inscription. Commencez dès maintenant.

Essayer maintenant