Générateur Border Radius CSS
Personnalisez chaque coin avec des sliders, prévisualisez en temps réel et copiez le CSS généré.
Coins
CSS
border-radius: 12px;Questions fréquentes
Qu'est-ce que la propriété border-radius en CSS ?
La propriété CSS border-radius permet d'arrondir les coins d'un élément. Elle accepte une valeur unique (tous les coins identiques) ou jusqu'à quatre valeurs pour personnaliser chaque coin indépendamment.
Les valeurs peuvent être en pixels (px), em, rem ou pourcentage (%). Un border-radius de 50% sur un carré crée un cercle parfait..
Quelle est la syntaxe complète de border-radius ?
La syntaxe courte border-radius: TL TR BR BL définit dans l'ordre : haut-gauche, haut-droite, bas-droite, bas-gauche. On peut aussi utiliser les propriétés longues : border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
Des valeurs elliptiques sont aussi possibles : border-radius: 50px / 25px crée une ellipse..
Quelle unité choisir : px, em ou % ?
Les pixels (px) donnent un arrondi fixe, indépendant de la taille de l'élément — idéal pour les composants UI aux dimensions définies. Les pourcentages créent un arrondi relatif à la taille de l'élément, parfait pour les formes circulaires (50%).
Les em/rem adaptent l'arrondi à la typographie, utile pour les boutons qui s'adaptent à la taille du texte..
Le border-radius est-il supporté par tous les navigateurs ?
Oui, border-radius est supporté par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) depuis 2011 sans préfixes vendeur. La compatibilité est de 99,6% selon Can I Use.
Les préfixes -webkit- et -moz- ne sont plus nécessaires pour les projets ciblant les navigateurs récents. Internet Explorer 9+ le supporte également..
Comment créer un cercle ou une pilule avec border-radius ?
Pour un cercle : appliquez border-radius: 50% à un élément carré (largeur = hauteur). Pour une pilule (pill button) : utilisez border-radius: 9999px ou une valeur suffisamment grande sur un rectangle.
Pour un demi-cercle : appliquez un border-radius sur deux coins adjacents d'un côté seulement, comme border-radius: 100px 100px 0 0..
Découvrez nos autres outils Design :
Propriété CSS border-radius. Syntaxe : border-radius: TL TR BR BL. Supportée par tous les navigateurs modernes (Can I Use : 99,6%). Spécification W3C CSS Backgrounds and Borders Level 3.