Générateur de border-radius

Réglez l'arrondi de chaque coin et copiez le code border-radius. Activez le mode avancé pour donner à chaque coin des rayons horizontal et vertical différents et créer des formes organiques (blobs).

Comment fonctionne border-radius

border-radius accepte d'une à quatre valeurs, appliquées dans le sens des aiguilles d'une montre en commençant en haut à gauche : 10px arrondit tous les coins de la même façon ; 10px 20px donne 10px aux coins supérieur gauche et inférieur droit et 20px aux deux autres ; et 10px 20px 30px 40px les règle chacun séparément. Il existe aussi des propriétés individuelles comme border-top-left-radius.

Une barre oblique permet d'indiquer des rayons horizontaux et verticaux différents, ce qui transforme chaque coin en quart d'ellipse : 50% / 60% 60% 40% 40% dessine un œuf. C'est ainsi qu'on crée les formes organiques ou « blobs » si répandues dans le webdesign actuel.

Cercles et pilules

Pour un cercle, utilisez border-radius: 50% sur une boîte carrée (sinon, vous obtiendrez une ellipse). Pour une pilule ou un bouton aux extrémités rondes, utilisez une valeur en pixels supérieure à la moitié de la hauteur, par exemple 999px : le navigateur la limite automatiquement et la forme ne se déforme pas quand la largeur change.

Les coins arrondis découpent aussi le fond et les ombres, mais pas le contenu qui dépasse de la boîte : pour découper une image, ajoutez overflow: hidden.