Un souci avec cet outil ?
À propos de « CSS Border Radius Generator Online »
Cet outil vous aide à composer des valeurs de border-radius avec un aperçu visuel. Contrôles par coin pour les formes asymétriques, pourcentages pour des « blobs » organiques, ou presets (rounded, pill, circle).
border-radius arrondit les angles. Au-delà de l'arrondi uniforme, le design moderne utilise rayons elliptiques, valeurs par coin et pourcentages asymétriques pour créer des formes organiques utilisées en illustration et décoration.
Fonctionne dans tout contexte CSS — boutons, cartes, images, conteneurs. Copie en forme courte (border-radius: ...) ou longue par coin selon vos préférences.
Comment utiliser cet outil
Construire une valeur border-radius à 4 coins
Définir chaque coin
« Top-left », « Top-right », « Bottom-right », « Bottom-left » acceptent le rayon en pixels du coin correspondant. L’ordre suit la shorthand CSS : haut-gauche puis sens horaire.
Exécuter
Résultat : champ unique `css` — `<tl>px <tr>px <br>px <bl>px`. À coller comme valeur de `border-radius:`. Si les quatre sont identiques on peut écrire une seule valeur, mais l’outil donne toujours la forme à 4 valeurs.
Astuces asymétriques
Des coins inégaux donnent des formes UI courantes : bulle de chat avec un coin à 0 (`12 12 12 0`), onglet avec deux coins bas à 0, bouton pilule avec un grand rayon à gauche/droite et 0 haut/bas — ou plus simple, un grand rayon égal partout type `9999`.
Rayons elliptiques
CSS permet des rayons elliptiques par coin via `tl-x/tl-y` (`12px/24px`). Cet outil n’émet que des coins circulaires (valeur unique) — modifiez à la main pour l’elliptique.