Générateur border-radius CSS – Coins arrondis et formes organiques
Arrondissez les coins de n’importe quel élément visuellement. Réglez chaque coin en pixels ou en pourcentage, utilisez des modèles pilule et cercle ou passez au mode avancé à 8 valeurs pour créer des formes organiques.
Réglez les curseurs haut gauche, haut droit, bas droit et bas gauche, ou cochez « Même valeur pour tous les coins ». Passez l’unité en % pour des formes qui suivent l’élément. Les modèles créent cartes arrondies, pilules, cercles et feuilles ; « Forme organique » utilise la syntaxe à 8 valeurs. Copiez le CSS le plus court possible.
Comment utiliser : Générateur de border-radius
- Choisissez un modèle ou réglez les curseurs des coins.
- Choisissez px ou % comme unité.
- Liez les coins s’ils doivent être identiques.
- Utilisez le mode avancé ou Forme organique pour des formes libres.
- Copiez le CSS du border-radius.
Comment fonctionne border-radius
`border-radius` arrondit les coins d’un élément. Avec une valeur, les quatre coins sont identiques ; avec quatre, ils suivent le sens des aiguilles d’une montre depuis le haut à gauche : haut gauche, haut droit, bas droit, bas gauche. Deux valeurs règlent haut gauche/bas droit et haut droit/bas gauche. Le générateur produit toujours la forme la plus courte.
| CSS | Résultat |
|---|---|
| border-radius: 12px | Carte légèrement arrondie |
| border-radius: 999px | Pilule quelle que soit la largeur |
| border-radius: 50% | Cercle (sur un carré) ou ellipse |
| border-radius: 0 60px | Forme de feuille |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% | Forme organique |
px ou pourcentage ?
Les pixels ne changent pas avec la taille de l’élément, idéal pour les cartes et les boutons. Les pourcentages se calculent sur la largeur (rayon horizontal) et la hauteur (rayon vertical) : 50 % transforme un carré en cercle et un rectangle en ellipse. Pour une pilule de largeur inconnue, préférez une grande valeur en pixels comme 999px à 50 %.
Coins elliptiques et formes organiques
Chaque coin peut avoir un rayon horizontal et un rayon vertical, écrits avant et après une barre oblique. Cette syntaxe à 8 valeurs produit les formes « blob » douces et irrégulières des illustrations modernes. En mode avancé, vous contrôlez les huit valeurs ; « Forme organique » en crée une nouvelle à chaque clic tout en gardant des courbes douces. Animez le passage d’une forme à l’autre avec une transition CSS pour un effet vivant.
Conseils
- Pour des éléments imbriqués, le rayon intérieur rend mieux s’il vaut le rayon extérieur moins le padding.
- Une image dans un conteneur arrondi a besoin de `overflow: hidden` sur le conteneur ou de son propre arrondi.
- De grands rayons sur de petits boutons serrent le texte : prévoyez assez de padding.
Outils CSS associés
Ajoutez de la profondeur avec le Générateur de box-shadow CSS, remplissez les formes avec le Générateur de dégradé CSS, créez des cartes en verre avec le Générateur de glassmorphism et convertissez les tailles avec Convertisseur px en rem.
Ces outils gratuits peuvent aussi vous être utiles : Formateur JSON, Générateur de mot de passe et Testeur de regex.
Questions fréquentes
Comment arrondir les coins en CSS ?
Avec border-radius, par exemple border-radius: 12px pour tous les coins ou border-radius: 10px 20px 30px 40px pour chacun.
Comment faire un cercle en CSS ?
Donnez à un élément carré border-radius: 50%.
Comment faire un bouton en forme de pilule ?
Utilisez une grande valeur comme border-radius: 999px ; il reste une pilule à toute largeur.
Que signifie la barre oblique dans border-radius ?
Les valeurs avant la barre sont les rayons horizontaux, celles après les rayons verticaux, ce qui crée des coins elliptiques.
Peut-on arrondir un seul coin ?
Oui. Mettez les autres à 0 ou utilisez des propriétés comme border-top-left-radius.
Dernière mise à jour: