Handytool
DéveloppeurGratuitExécuté localement

Générateur de border-radius CSS

Concevez visuellement CSS border-radius — uniforme, par-coin et elliptique — avec aperçu en direct.

Aperçu
CSS
border-radius: 16px;
Mode
Unité

Le mode par coin contrôle chaque coin individuellement ; elliptique divise les rayons horizontal et vertical.

À propos de Générateur de border-radius CSS

Le générateur border-radius de Handytool vous permet de façonner les coins d'un élément avec des curseurs au lieu de deviner. Utilisez le mode uniforme pour une boîte arrondie simple, le mode par-coin pour construire des formes de pilule asymétriques ou le mode elliptique pour diviser les rayons horizontaux et verticaux pour les formes de blob organiques. L'aperçu est mis à jour en direct et la déclaration CSS est à un clic.

Fonctionnalités de Générateur de border-radius CSS

  • 01

    Modes uniforme et par-coin

    Le mode uniforme applique un rayon à chaque coin. Le mode par-coin contrôle indépendamment le coin supérieur-gauche, supérieur-droit, inférieur-droit et inférieur-gauche — les formes de pilule, de feuille et d'étiquette asymétrique sont à quelques clics.

  • 02

    Coins elliptiques (X/Y)

    Basculez le mode elliptique pour spécifier un rayon horizontal et vertical par coin — la syntaxe que CSS supporte pour les formes de blob organiques.

  • 03

    Trois unités

    Basculez entre px, % et rem. Les valeurs en pourcentage créent de véritables ellipses qui s'adaptent à la boîte ; les valeurs rem suivent la taille de la police racine pour l'accessibilité.

FAQ Générateur de border-radius CSS

Quelle est la différence entre px et % ?
Les rayons en pixels sont absolus — un coin de 16px est toujours 16px. Les rayons en pourcentage sont relatifs à la largeur et la hauteur de l'élément, donc 50% crée un cercle parfait sur une boîte carrée et une ellipse sur un rectangle.
Quand dois-je utiliser le mode elliptique ?
Utilisez le mode elliptique lorsque vous souhaitez un coin qui dépasse plus sur un axe — par exemple une pilule horizontale (50%/100%) ou une forme de blob en forme de feuille. CSS l'exprime comme `coin-supérieur-gauche-x coin-supérieur-droit-x ... / coin-supérieur-gauche-y coin-supérieur-droit-y ...`.
Pourquoi mon rayon en pourcentage semble-t-il mal sur une boîte non carrée ?
Les pourcentages sur border-radius sont relatifs au côté correspondant : pourcentages horizontaux pour la largeur, vertical pour la hauteur. Sur une boîte large et courte, cela signifie que les coins s'étirent en ellipses, pas en arcs parfaits.
La sortie fonctionne-t-elle dans tous les navigateurs ?
Oui — border-radius et la syntaxe elliptique sont supportés dans tous les navigateurs modernes, y compris toutes les versions evergreen de Safari, Firefox, Edge et Chrome.

Outils liés

Développeur →

Explorez d'autres outils

Tous les outils →