Générateur de Border Radius
Le générateur de border-radius CSS règle chaque coin du border-radius d’un élément en pourcentage, avec des curseurs individuels ou un curseur Tous les coins, plus des préréglages comme cercle, feuille et blob, puis copie le CSS.
À propos de cet outil
Le générateur de border-radius CSS règle chaque coin du border-radius d’un élément en pourcentage, avec des curseurs individuels ou un curseur Tous les coins, plus des préréglages comme cercle, feuille et blob, puis copie le CSS.
Mode d’emploi
- Faites glisser les curseurs de chaque coin, ou utilisez Tous les coins.
- Essayez un préréglage comme Cercle, Feuille ou Blob.
- Modifiez la taille de l’aperçu si nécessaire.
- Cliquez sur Copier le CSS.
Bon à savoir
- border-radius accepte jusqu’à quatre valeurs dans l’ordre haut gauche, haut droit, bas droit, bas gauche.
- border-radius: 50% sur un élément carré crée un cercle.
- Les rayons en pourcentage s’adaptent à la taille de l’élément ; les rayons en pixels restent fixes.
- Des rayons inégaux sur des coins opposés créent des formes de feuille et de blob sans aucun SVG.
- border-radius est pris en charge par tous les navigateurs actuels sans préfixe.
Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.
Questions fréquentes
Comment arrondir les coins en CSS ?
Définissez border-radius, par exemple border-radius: 12px; pour tous les coins, ou quatre valeurs pour des coins individuels.
Comment créer un cercle en CSS ?
Donnez à l’élément une largeur et une hauteur égales ainsi que border-radius: 50%.
Dans quel ordre se lisent les quatre valeurs de border-radius ?
Haut gauche, haut droit, bas droit, bas gauche : dans le sens des aiguilles d’une montre à partir du coin supérieur gauche.
Faut-il utiliser px ou % pour border-radius ?
Utilisez px pour des coins de taille constante sur les boutons et les cartes ; utilisez % pour des formes comme les cercles et les blobs qui s’adaptent à l’élément.