Réglez séparément le rayon des quatre coins d’un cadre

Avec Rayon de bordure, les designers et intégrateurs web peuvent ajuster une interface avant son intégration. Réglez séparément le rayon des quatre coins d’un cadre.

Réglez séparément le rayon des quatre coins d’un cadre. L’outil reste gratuit dans votre navigateur et ne demande aucun compte pour afficher le résultat.

Mode d’emploi

Saisissez dans le champ la valeur de rayon pour le coin haut gauche, puis les trois autres coins dans l'ordre indiqué.
Utilisez l'unité de votre choix, comme px, em ou pourcentage, en gardant la même unité pour tous les coins.
Cliquez sur le bouton de génération pour produire la règle CSS border-radius correspondante.
Lisez le résultat, qui combine les quatre valeurs, et copiez-le dans votre feuille de style.
Vérifiez le rendu sur un élément de test avant de l'intégrer à votre page.

Exemple

L'exemple fourni utilise quatre valeurs distinctes pour les coins. Après génération, le résultat affiche la propriété border-radius correspondante. Vous pouvez comparer cette sortie avec vos valeurs pour confirmer l'ordre des coins avant de la coller dans votre code.

Limites et formats

L'outil ne dessine pas de cadre à l'écran ; il produit seulement la règle CSS à copier.
Les valeurs doivent être numériques et positives ou nulles ; les valeurs négatives ne sont pas acceptées par la propriété CSS.
Si vous mélangez les unités, le résultat peut être ignoré par le navigateur.
Vérifiez toujours le rendu final dans votre page, car le contexte de l'élément peut modifier l'effet visuel.

Où le traitement a lieu

Tout se passe dans votre navigateur. Les valeurs saisies ne sont ni envoyées ni conservées. Le calcul et la mise en forme de la règle CSS sont réalisés localement, sans aucune communication avec l'extérieur.

Questions fréquentes

Dans quel ordre faut-il saisir les quatre valeurs ?

L'ordre attendu est haut gauche, haut droit, bas droit, bas gauche. C'est l'ordre standard de la propriété border-radius. Si vous inversez deux valeurs, le rendu sera différent. Vérifiez le résultat affiché pour confirmer.

Puis-je utiliser des pourcentages ?

Oui, les pourcentages sont acceptés. Ils créent des coins arrondis proportionnels à la taille de l'élément. Gardez la même unité pour les quatre coins afin d'éviter un résultat incohérent.

Le résultat est-il prêt à coller dans mon fichier CSS ?

Oui, le résultat se présente sous la forme d'une propriété CSS complète. Vous pouvez la copier et la coller dans votre feuille de style. Pensez à vérifier qu'elle ne soit pas écrasée par une autre règle.