Générateur border-radius
Arrondissez les coins et créez des formes blob organiques.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Des coins arrondis classiques aux blobs tendance
Le mode 4 coins couvre le quotidien : boutons, cartes, avatars. Le mode blob exploite la syntaxe à huit valeurs pour des formes douces et organiques très en vogue dans les illustrations et fonds décoratifs.
-
Choisissez le mode
4 coins pour un arrondi simple, blob pour une forme organique.
-
Ajustez les curseurs
Le bouton « Aléatoire » génère un blob unique d’un clic.
-
Copiez le CSS
La propriété border-radius complète, prête à coller.
La syntaxe en deux exemples
| Mode | CSS généré |
|---|---|
| 4 coins égaux | border-radius: 16px; |
| Blob par défaut | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Avant la barre / | Rayons horizontaux des 4 coins |
| Après la barre / | Rayons verticaux des 4 coins |
Tout est calculé dans votre navigateur. Pour découper une image selon la forme, ajoutez overflow: hidden sur le conteneur.
Questions fréquentes
Comment arrondir un seul coin ?
En mode « 4 coins », réglez le curseur du coin voulu et laissez les autres à 0. Le CSS généré liste les rayons dans l’ordre haut-gauche, haut-droit, bas-droit, bas-gauche ; quand toutes les valeurs sont égales, l’outil écrit une seule valeur.
Qu’est-ce que la syntaxe blob à huit valeurs ?
border-radius accepte des rayons horizontaux et verticaux séparés par une barre « / ». Par exemple « 30% 70% 70% 30% / 30% 30% 70% 70% » donne quatre coins aux rayons asymétriques : c’est ce qui crée ces formes organiques douces.
Pourquoi utiliser des pourcentages plutôt que des pixels ?
Les pourcentages sont relatifs à la taille de l’élément : la forme blob garde ses proportions quelle que soit la dimension. Les pixels conviennent mieux à un arrondi fixe, comme un bouton ou une carte de coins constants.
border-radius rogne-t-il le contenu ?
La bordure et le fond suivent l’arrondi, mais un contenu enfant peut dépasser. Ajoutez « overflow: hidden » sur l’élément pour que les images et le contenu soient découpés selon les coins arrondis.