Ce que fait cet outil
Cet outil vous permet de donner forme a des coins arrondis a vue d’oeil et vous fournit la valeur CSS border-radius correspondante. Vous faites glisser un curseur pour chacun des quatre coins et une boite d’apercu en direct se met a jour en temps reel, afin que vous puissiez voir exactement le rendu de la forme avant de valider. Il aide les developpeurs front-end qui veulent une valeur precise sans tatonnements, les designers qui creent le style d’un composant et toute personne qui apprend comment border-radius controle la courbure des coins.
Comme chaque coin a son propre curseur, vous n’etes pas limite a un arrondi uniforme. Vous pouvez arrondir uniquement le haut, creer une forme de pilule ou courber un seul coin pour un onglet ou une carte.
Comment l’utiliser
- Faites glisser le curseur en haut a gauche pour regler la courbe du coin superieur gauche.
- Faites glisser le curseur en haut a droite pour le coin superieur droit.
- Faites glisser le curseur en bas a droite pour le coin inferieur droit.
- Faites glisser le curseur en bas a gauche pour le coin inferieur gauche.
- Observez la mise a jour de l’apercu a chaque changement jusqu’a ce que la forme convienne.
- Copiez la regle CSS border-radius generee et collez-la dans votre feuille de style.
Un exemple rapide
Pour faire une carte au sommet arrondi et a la base plate, montez les curseurs en haut a gauche et en haut a droite a la meme valeur et gardez ceux en bas a gauche et en bas a droite a zero. L’apercu affiche une forme d’onglet, et la regle copiee ressemble a border-radius: 16px 16px 0 0;. Un piege courant est d’oublier que les valeurs se lisent dans le sens horaire a partir du coin superieur gauche, alors verifiez l’apercu si un coin se courbe la ou vous ne l’attendiez pas.
Il fonctionne entierement dans votre navigateur, garde votre travail prive, est totalement gratuit et ne necessite aucune inscription.
Questions fréquentes
- Comment arrondir uniquement les coins superieurs?
- Reglez les curseurs en haut a gauche et en haut a droite sur le rayon souhaite et laissez les deux du bas a zero. L'apercu se met a jour pendant que vous glissez, et le CSS copie garde les coins inferieurs droits.
- Quel CSS l'outil me donne-t-il?
- Il produit une regle border-radius prete a l'emploi avec les quatre valeurs de coin dans l'ordre: en haut a gauche, en haut a droite, en bas a droite, en bas a gauche. Collez-la directement dans votre feuille de style.
- Mes reglages sont-ils envoyes quelque part?
- Non. L'apercu et le CSS sont generes entierement dans votre navigateur, donc rien n'est envoye a un serveur. Aucun televersement et aucune inscription.