Deux pourcentages par angle composent un border-radius elliptique. Partez d’un préréglage ou saisissez vos valeurs, puis copiez la règle générée.
Fonctionne localement dans votre navigateurL’atelier écrit une seule déclaration pour l’élément : border-radius avec une valeur horizontale et une valeur verticale par angle, accompagnée de la largeur et de la hauteur de l’aperçu. La scène part d’un cadre de 280 × 220 px : le passage de 18 % à 50 % se voit donc immédiatement.
Aucun bouton d’exécution : la forme et le panneau de code suivent chaque modification. Copier CSS place exactement ce bloc dans le presse-papiers et Réinitialiser ramène les Coins doux (280 × 220, 18 %).
Personnalisé (28 %), Coins doux (18 %) et Pilule (50 % sur un cadre de 320 × 160) sont symétriques : les huit valeurs sont identiques. Galet (290 × 230) et Blob organique (280 × 250) mélangent les angles — Galet commence à 58 / 42 en haut à gauche et 34 / 62 en haut à droite, et le contour cesse de ressembler à un rectangle arrondi.
Chaque angle prend deux pourcentages parce que CSS dessine l’angle comme une ellipse : la première valeur est le rayon horizontal, la seconde le vertical. L’export les liste dans l’ordre haut gauche, haut droite, bas droite, bas gauche, d’abord la série horizontale, puis la verticale après la barre oblique.
Un border-radius en pourcentage se résout contre le cadre de l’élément lui-même, et non contre un nombre fixe de pixels : une même déclaration convient donc à un bouton large comme à un petit avatar. Les champs Largeur et Hauteur servent à le montrer : ils redimensionnent l’aperçu, pas les rayons de la déclaration.
Le navigateur limite en outre les rayons qui se chevaucheraient sur un bord, si bien que la forme dessinée peut paraître plus petite que les valeurs saisies. Le panneau de code affiche toujours les valeurs réellement utilisées : c’est pourquoi les champs se recadrent dès que vous les quittez.
Le code généré tient en un bloc : .rounded-shape avec width, height et une ligne border-radius à la forme horizontal / vertical. Aucun préfixe éditeur, aucune media query ni sélecteur supplémentaire : il suffit de coller et de renommer la classe.
L’outil fonctionne entièrement dans la page : valeurs et sélections ne quittent pas le navigateur. Copier CSS copie le bloc et la ligne d’état le confirme, ce qui permet de préparer la règle sans risque avant de l’intégrer à une feuille de styles.