Générateur de border-radius

Comment utiliser le générateur de border-radius

1. Faites glisser les points placés sur les bords de l’aperçu. Chaque point coloré règle le rayon horizontal d’un coin ; quand Coins elliptiques (8 valeurs) est coché, les points blancs règlent les rayons verticaux.
2. Vous pouvez aussi saisir des valeurs précises dans Coins : En haut à gauche, En haut à droite, En bas à droite et En bas à gauche, chacun avec un champ Horizontal et un champ Vertical.
3. Choisissez l’Unité : % (pourcentage de la boîte) ou px (pixels). Le changement convertit les valeurs actuelles, la forme reste donc identique.
4. Indiquez la Largeur de la boîte (px) et la Hauteur de la boîte (px) de votre élément, et utilisez Tous les coins pour tout arrondir d’un coup.
5. Essayez les Préréglages (Arrondi, Pilule, Cercle, Feuille, Goutte, Œuf, Ticket et trois blobs) ou cliquez sur Blob aléatoire pour obtenir une forme organique.
6. Cochez Propriétés détaillées si vous préférez les quatre déclarations border-*-radius, puis copiez le Code CSS avec Copier.

Au clavier : sélectionnez un point et utilisez les flèches pour modifier son rayon d’un pas (10 avec Maj).

La syntaxe de border-radius

border-radius accepte une à quatre valeurs, dans l’ordre haut gauche, haut droite, bas droite, bas gauche. Comme pour les marges, une valeur absente reprend celle du coin opposé : border-radius: 10px 20px arrondit le haut gauche et le bas droit de 10px, les deux autres de 20px. L’outil écrit toujours la forme la plus courte.

Chaque coin est en réalité un quart d’ellipse, avec deux rayons. Une barre oblique sépare les rayons horizontaux des rayons verticaux, ce qui donne jusqu’à huit valeurs :

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Avant la barre : les rayons horizontaux des quatre coins. Après : les rayons verticaux. Si les deux listes sont identiques, la partie après la barre disparaît.

Pixels ou pourcentages ?

• px donne la même courbe quelle que soit la taille de l’élément. C’est le bon choix pour les boutons, les cartes et les champs : border-radius: 8px.
• % dépend de l’élément : les rayons horizontaux se calculent sur sa largeur, les verticaux sur sa hauteur. 50% transforme un carré en cercle et un rectangle en ellipse. Ce sont les pourcentages qui permettent aux blobs de suivre la taille de l’élément.

Pour un bouton en forme de pilule, utilisez un rayon en pixels au moins égal à la moitié de la hauteur. Le préréglage Pilule le calcule pour la taille de boîte saisie ; une très grande valeur comme 999px fonctionne aussi.

Quand deux rayons voisins dépassent ensemble la longueur du côté qu’ils partagent, le navigateur réduit tous les rayons dans la même proportion. C’est pourquoi croiser deux poignées ne casse pas la forme.

Les formes blob

Les préréglages blob et Blob aléatoire utilisent huit pourcentages dont les deux poignées de chaque côté totalisent 100 %. Les courbes se rejoignent alors parfaitement et la forme ressemble à un galet. Une transition CSS sur border-radius entre deux blobs donne un joli effet de morphing.