Catégorie: Développement
Générateur de border-radius CSS
Arrondir coin par coin, avec aperçu en direct
Réglez un curseur par coin et copiez la déclaration border-radius. Activez les coins elliptiques pour la syntaxe à barre oblique qui produit des formes organiques.
border-radius: 12px;
L'aperçu est un vrai élément auquel la valeur est appliquée : vous voyez donc exactement ce que dessine le navigateur.
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
border-radius ressemble à un seul nombre jusqu'au jour où trois coins doivent différer, et la forme abrégée piège alors tout le monde : les quatre valeurs tournent dans le sens horaire depuis le coin supérieur gauche, et la forme à barre oblique donne à chaque coin un rayon horizontal avant la barre et un rayon vertical après. C'est cette seconde forme qui dessine les silhouettes douces et asymétriques que l'on lit comme organiques plutôt que comme une boîte arrondie. Vous disposez ici d'un curseur par coin, d'un véritable élément auquel la valeur est appliquée plutôt que d'une image, et d'une sortie condensée comme l'écrirait une personne : quatre coins identiques donnent une seule valeur.
Mode d'emploi
- Choisissez l'unité et déliez les coins s'ils doivent différer.
- Réglez chaque coin jusqu'à ce que l'aperçu convienne.
- Activez les coins elliptiques pour des formes organiques, puis copiez la déclaration.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Que signifie la barre oblique dans la valeur ?
- Tout ce qui précède la barre est le rayon horizontal de chaque coin, tout ce qui la suit le rayon vertical. Des valeurs différentes de part et d'autre donnent une ellipse plutôt qu'un quart de cercle.
- Pourcentages ou pixels ?
- Les pixels conservent la même courbe à toutes les tailles, ce que veulent en général boutons et cartes. Les pourcentages suivent l'élément : 50 pour cent sur un carré donne un cercle.
- Pourquoi ma sortie compte-t-elle moins de quatre valeurs ?
- CSS condense les coins répétés, et cet outil aussi : quatre coins identiques font une valeur, une diagonale identique en fait deux. Le résultat est le même, en plus court.