Tout ce que permet border-radius
On utilise souvent border-radius pour un simple arrondi de 8 px, mais la propriété va beaucoup plus loin : coins différents les uns des autres, cercles parfaits, boutons en forme de pilule et même formes organiques de type blob, sans image ni SVG. Ces possibilités reposent sur une syntaxe peu connue que ce générateur rend visuelle.
Vous réglez les quatre coins ensemble (liés) ou individuellement, en pixels ou en pourcentage. Les pixels donnent un arrondi constant quelle que soit la taille de l’élément ; les pourcentages s’adaptent à ses dimensions, ce qui permet par exemple un cercle avec 50 %.
L’option coins elliptiques sépare le rayon horizontal et le rayon vertical de chaque coin. C’est la syntaxe à 8 valeurs avec barre oblique, par exemple border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%, qui produit les formes organiques à la mode. Des presets (pilule, cercle, blob) vous donnent un point de départ.
Le générateur écrit la déclaration border-radius la plus courte possible : une seule valeur si les quatre coins sont égaux, deux ou trois si une symétrie le permet. Il fonctionne dans votre navigateur avec aperçu en direct et il est gratuit sans limite : pas d’essai à épuiser ni d’abonnement nécessaire.
Comment créer un border-radius ?
- Partez d’un preset (pilule, cercle, blob) ou de coins droits.
- Choisissez l’unité : px ou %.
- Réglez les quatre coins ensemble, ou déliez-les pour les régler un par un.
- Activez les coins elliptiques pour régler les rayons horizontal et vertical séparément.
- Copiez la déclaration border-radius générée.
Quand utiliser le générateur de border-radius ?
- Boutons en forme de pilule pour une interface.
- Avatars ronds à partir d’images carrées.
- Bulles de discussion avec un coin moins arrondi que les autres.
- Formes organiques décoratives derrière une illustration.
- Cartes avec des arrondis uniquement en haut.
Lire la syntaxe border-radius
- Ordre des coins : haut-gauche, haut-droit, bas-droit, bas-gauche (sens des aiguilles d’une montre).
- border-radius: 10px 20px; s’applique à haut-gauche et bas-droit (10px), puis haut-droit et bas-gauche (20px).
- Avec une barre oblique, les valeurs avant le / sont les rayons horizontaux, celles après les rayons verticaux.
- Pilule : une valeur très grande en px (par exemple 9999px) arrondit complètement les petits côtés.
- Cercle : 50 % sur un élément carré ; sur un rectangle, 50 % donne une ellipse.
Foire Aux Questions
Le générateur est-il gratuit ?
Oui, entièrement. Les générateurs CSS de ToolStudio sont gratuits et sans limite : vous ajustez les réglages, regardez l’aperçu en direct et copiez le CSS autant de fois que vous voulez, sans compte ni abonnement.
px ou % pour border-radius ?
Les px gardent le même arrondi quelle que soit la taille ; les % s’adaptent aux dimensions de l’élément et servent aux cercles et formes organiques.
Comment créer une forme blob en CSS ?
Activez les coins elliptiques et utilisez des pourcentages différents pour chaque rayon, ou partez du preset blob et ajustez.
Pourquoi mon contenu dépasse-t-il des coins arrondis ?
border-radius arrondit la boîte, pas forcément son contenu. Ajoutez overflow: hidden sur l’élément pour rogner une image ou un enfant.
Comment faire une pilule qui s’adapte à la largeur ?
Utilisez une valeur très grande en px plutôt que 50 % : les % produiraient une ellipse sur un élément rectangulaire.