Comment utiliser : Générateur border-radius
- Faites glisser le curseur pour arrondir les quatre coins, ou choisissez Chaque coin pour régler séparément haut-gauche, haut-droit, bas-droit et bas-gauche.
- Changez l'unité :
pxpour un arrondi fixe,%pour une valeur proportionnelle à l'élément (50 % sur un carré donne un cercle). - Choisissez Elliptique ou Blob aléatoire pour des formes organiques avec 8 valeurs.
- Copiez le CSS : il est raccourci au minimum de valeurs donnant la même forme.
Fonctionnement des valeurs border-radius
| CSS | Coins |
|---|---|
border-radius: 12px | les quatre |
border-radius: 12px 4px | haut-gauche et bas-droit, haut-droit et bas-gauche |
border-radius: 12px 8px 4px 0 | haut-gauche, haut-droit, bas-droit, bas-gauche (sens horaire) |
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% | elliptique : rayons horizontaux / rayons verticaux, formes blob |
Boutons arrondis : utilisez une grande valeur comme 9999px. Le navigateur la limite à la moitié de la hauteur, de sorte que les extrémités restent rondes quelle que soit la taille. Cercles : 50% sur un élément carré. Les pourcentages sont relatifs à la largeur de la boîte (rayons horizontaux) et à sa hauteur (rayons verticaux).
Voir aussi : Générateur de box-shadow, Générateur de dégradé CSS, Générateur de glassmorphism.
Aussi recherché comme : border radius css, coins arrondis css, générateur border-radius en ligne, générateur css blob, forme blob css, générateur coins arrondis css, border radius en ligne.
Outils complémentaires : Générateur border-radius
- Générateur CSS Grid — Définissez les colonnes, lignes et espacements, puis tracez sur les cellules pour créer des zones comme header, sidebar et main.
- Générateur de filtre CSS — Ajustez le flou, la luminosité, le contraste, la saturation, la teinte, les niveaux de gris, le sépia, l’inversion et l’ombre portée sur un exemple ou sur votre propre image, puis copiez le CSS filter.
- Générateur Cubic Bezier — Façonnez une courbe d'accélération en faisant glisser deux poignées et comparez-la aux easings standard.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
Questions fréquentes
Comment créer des coins arrondis en CSS ?
Utilisez border-radius, par exemple border-radius: 12px pour tous les coins, ou quatre valeurs pour haut-gauche, haut-droit, bas-droit et bas-gauche.
Comment créer un bouton en forme de pilule ?
Définissez border-radius sur une grande valeur comme 9999px. Le navigateur la limite à la moitié de la hauteur, les extrémités sont donc toujours parfaitement rondes.
Comment créer un cercle ?
Donnez à l'élément une largeur et une hauteur égales, puis appliquez border-radius: 50%.
Que signifie la barre oblique dans border-radius ?
Les valeurs avant la barre oblique sont les rayons horizontaux, et celles après sont les rayons verticaux. Chaque coin devient ainsi une ellipse, ce qui permet de créer des formes blob.
Puis-je installer Générateur border-radius en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur border-radius est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.