Générez une valeur border-radius CSS

Saisissez des longueurs ou pourcentages CSS usuels pour obtenir à la fois la valeur abrégée et la propriété border-radius complète. L’ordre respecte la spécification CSS : vous pouvez donc régler chaque angle de manière cohérente sans rechercher quelle position le commande. Les rayons négatifs sont refusés, car ils ne sont pas valides dans une feuille de style.

Choisissez entre un et quatre rayons

Commencez par choisir le nombre de valeurs correspondant à la forme recherchée. Une seule valeur applique le même rayon aux quatre angles, ce qui convient parfaitement aux cartes, boutons, champs et autres composants symétriques. Deux valeurs alternent entre les angles opposés : la première commande les angles supérieur gauche et inférieur droit, tandis que la seconde commande les angles supérieur droit et inférieur gauche. Avec trois valeurs, la première concerne l’angle supérieur gauche, la deuxième les angles supérieur droit et inférieur gauche, et la troisième l’angle inférieur droit. Quatre valeurs permettent un réglage indépendant dans le sens horaire : supérieur gauche, supérieur droit, inférieur droit, puis inférieur gauche. Chaque entrée doit être une longueur CSS ou un pourcentage positif ou nul, par exemple 8px, 0.5rem, 12% ou 0. Le zéro sans unité est admis par CSS, mais tout autre nombre doit comporter une unité de longueur reconnue ou le signe de pourcentage. La saisie en valeurs distinctes rend l’association entre positions et angles visible avant la création du raccourci final.

Interprétez et utilisez le CSS produit

Le résultat comprend deux champs adaptés à des usages différents. Le champ border_radius contient uniquement la valeur raccourcie ; il est pratique lorsqu’une application connaît déjà la propriété CSS à définir ou lorsqu’une chaîne de jetons de conception exige une valeur seule. Le champ css fournit la déclaration complète, avec le nom de propriété border-radius, les deux-points et le point-virgule, afin que vous puissiez la coller directement dans une règle de style. Les valeurs apparaissent dans l’ordre de saisie et sont séparées par une espace unique. Le générateur ne réorganise pas silencieusement les angles, ne convertit pas les unités et ne réduit pas les valeurs répétées : la représentation fournie reste ainsi prévisible et la syntaxe volontaire des jetons est préservée. Par exemple, les valeurs 8px et 16px donnent border-radius: 8px 16px;, tandis que quatre valeurs forment une déclaration dans le sens horaire. La sortie est déterministe et ne dépend d’aucune mesure propre au navigateur ; l’API et l’outil exécuté localement renvoient donc exactement les mêmes chaînes.

Validez les rayons avant de publier un composant

Les rayons d’angle CSS ne peuvent pas être négatifs. Le générateur s’arrête donc avec une erreur de saisie dès qu’une valeur commence par un signe moins. Il refuse également les éléments vides, le texte non pris en charge, les nombres non nuls dépourvus d’unité, les déclarations contenant de la ponctuation et les tableaux qui ne comportent pas entre une et quatre valeurs. Cette validation est utile lorsque les rayons proviennent d’un formulaire, d’un fichier de configuration, d’un éditeur de thème ou d’une compilation automatisée de jetons de conception, où un texte incorrect pourrait autrement atteindre une feuille de style sans être détecté. Les unités absolues, relatives à la police ou à la fenêtre, physiques et en pourcentage les plus courantes sont acceptées, notamment px, em, rem, vw, vh, vmin, vmax, ch, cm, mm, in, pt et pc, ainsi que les variantes modernes de fenêtre. Cette capacité produit le raccourci standard à rayon unique ; elle ne génère pas la syntaxe elliptique séparée par une barre oblique. Pour des angles elliptiques, conservez séparément les rayons horizontal et vertical dans votre CSS. Prévisualisez enfin le résultat sur l’élément réel, car les pourcentages dépendent de ses dimensions.