Points clés
- 01Trois modes — uniforme, par coin et elliptique — couvrent tout, des boutons arrondis simples aux formes blob organiques.
- 02Supporte les unités px, %, et rem, chacune avec un comportement d'échelle différent.
- 03Le mode elliptique expose les rayons horizontaux et verticaux par coin pour la syntaxe complète border-radius de CSS.
- 04L'aperçu en direct utilise la propriété CSS réelle, donc ce que vous voyez est exactement ce que votre navigateur affichera.
Des coins arrondis simples aux formes blob organiques
Une valeur border-radius à quatre coins est facile à taper de mémoire — border-radius: 8px. Mais une fois que vous avez besoin de rayons différents par coin, ou que vous voulez la syntaxe elliptique CSS pour des formes organiques, la notation courte devient cryptique rapidement. La forme complète est top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — huit valeurs dans un ordre spécifique.
Le générateur border-radius de Handytool vous permet de faire glisser les curseurs pour chaque coin dans n'importe quel mode et de voir la forme se mettre à jour en direct. Basculez entre px, %, et rem sans recalculer, et copiez la déclaration CSS correcte en notation courte ou longue quand vous avez terminé.
Comment concevoir un border-radius
- 01
Choisissez un mode
Le mode uniforme applique un rayon à tous les quatre coins. Le mode par coin contrôle chaque coin indépendamment. Le mode elliptique ajoute un rayon horizontal et vertical séparé par coin.
- 02
Choisissez une unité
Choisissez px pour les tailles absolues, % pour les valeurs qui s'adaptent aux dimensions de l'élément, ou rem pour les tailles liées à la taille de police racine.
- 03
Faites glisser les curseurs
Ajustez les valeurs de rayon et regardez l'élément d'aperçu se mettre à jour en direct. Pour le mode par coin, faites glisser le curseur de chaque coin indépendamment.
- 04
Prévisualisez la forme
La boîte d'aperçu applique la propriété CSS border-radius réelle, donc la forme que vous voyez est la forme que votre navigateur affichera.
- 05
Copiez le CSS
Cliquez sur Copier pour récupérer la déclaration border-radius et collez-la dans votre feuille de style.
Formes courantes et quand utiliser chaque mode
- 01Bouton pilule : mode % uniforme, défini à 50% — toujours une pilule complète quelle que soit la largeur du bouton
- 02Carte avec arrondi subtil : mode px uniforme, 8–16px — le motif UI le plus courant
- 03Étiquette ou libellé asymétrique : mode par coin, pointu d'un côté, arrondi de l'autre
- 04Cercle d'avatar : mode % uniforme, 50% — s'adapte au conteneur d'image
- 05Forme blob organique : mode elliptique avec différentes valeurs X/Y par coin
Aperçu instantané, rien n'est téléchargé
Le générateur border-radius est entièrement côté client. Les curseurs, les changements de mode et les changements d'unité mettent tous à jour l'aperçu instantanément sans aller-retour serveur. Il n'y a pas de compte et pas de limite de débit.
L'outil fonctionne sur tous les navigateurs modernes. La propriété border-radius — y compris la syntaxe elliptique X/Y — est supportée dans chaque version persistante de Safari, Firefox, Edge et Chrome, donc la sortie est sûre à utiliser sans préfixes de fournisseur ou solutions de secours.
FAQ du générateur Border-Radius
Quelle est la différence entre px et % pour border-radius ?
Les rayons en pixels sont absolus — 16px est toujours 16px. Les rayons en pourcentage sont relatifs aux dimensions 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 quand vous voulez un coin qui s'étend davantage sur un axe — pour une pilule horizontale, une forme de feuille ou un blob organique. CSS exprime cela comme X-radii / Y-radii dans la notation courte border-radius.
Pourquoi mon rayon en pourcentage semble-t-il incorrect sur une boîte non carrée ?
Les pourcentages horizontaux sont relatifs à la largeur de l'élément ; les pourcentages verticaux à sa hauteur. Sur un élément large et court, les coins s'étirent en ellipses plutôt qu'en arcs circulaires.
La sortie fonctionne-t-elle dans tous les navigateurs ?
Oui — border-radius y compris la syntaxe elliptique est supporté dans tous les navigateurs modernes : toutes les versions persistantes de Safari, Firefox, Edge et Chrome. Aucun préfixe de fournisseur nécessaire.
Comment créer un cercle parfait avec border-radius ?
Définissez tous les coins à 50% en mode pourcentage sur un élément carré. L'élément doit également avoir une largeur et une hauteur égales — utilisez aspect-ratio: 1 / 1 si la taille est dynamique.