Générateur de border-radius
Arrondissez les quatre coins ensemble ou un par un, et copiez la ligne border-radius.
CSS
Arrondir les coins en CSS
Les coins arrondis adoucissent cartes, boutons, avatars et images. Cette page ouvre le Générateur CSS sur son onglet coins arrondis, où vous arrondissez tous les coins ensemble ou façonnez chacun d'eux.
Exemples
| CSS | Forme |
|---|---|
border-radius: 8px; | Carte ou bouton légèrement arrondi |
border-radius: 50%; | Cercle sur un carré, comme un avatar |
border-radius: 999px; | Bouton ou étiquette en forme de pilule |
border-radius: 24px 24px 0px 0px; | Seuls les coins du haut arrondis, comme sur un panneau glissant du bas |
Pixels ou pourcentage
Les valeurs en pixels gardent la même courbe quelle que soit la taille de l'élément, ce qui convient aux boutons et aux cartes. Les valeurs en pourcentage grandissent avec l'élément, et chaque coin est mesuré séparément par rapport à la largeur et à la hauteur : sur un rectangle, la courbe devient donc elliptique.
Outils associés
Pour ajouter une ombre à l'élément arrondi, voyez le générateur de box-shadow. Pour un remplissage en dégradé, voyez le générateur de dégradé CSS.