Les résultats sont fournis à titre informatif uniquement et peuvent contenir des erreurs. Vérifiez les informations importantes de manière indépendante. L'utilisation de cet outil se fait à vos propres risques.
Ce que fait cet outil
Le générateur de border-radius vous permet d'arrondir chaque coin d'un bloc séparément grâce à quatre curseurs, de 0 à 100 pixels, et de voir la forme dans un aperçu en direct. Le résultat est une seule déclaration border-radius à coller dans votre feuille de style. Les quatre coins partent de 20px.
Les valeurs sont écrites dans l'ordre attendu par CSS : haut gauche, haut droit, bas droit, bas gauche, dans le sens des aiguilles d'une montre à partir du coin supérieur gauche. Des valeurs égales donnent une carte uniformément arrondie ; des valeurs différentes permettent des bulles de dialogue, des onglets, des formes de feuille et d'autres designs asymétriques. Cette propriété raccourcie fonctionne dans tous les navigateurs actuels, sans préfixe.
Quand l'utiliser
- Styliser des cartes, des boutons et des champs de saisie selon le rayon d'angle d'un design system.
- N'arrondir que les coins supérieurs d'un onglet ou les coins inférieurs d'un menu déroulant.
- Créer une bulle de chat avec un coin pointu.
- Essayer rapidement différents rayons au lieu de modifier le CSS et de recharger la page.
Exemple concret
Entrée
Haut gauche 24, haut droit 24, bas droit 4, bas gauche 24Sortie
border-radius: 24px 24px 4px 24px;Questions sur cet outil
Comment obtenir un cercle parfait ?
Appliquez border-radius: 50% à un élément carré. Un pourcentage est relatif à la taille de l'élément : il reste donc rond quelle que soit sa largeur. Pour un bouton en forme de pilule, utilisez plutôt une grande valeur en pixels, comme 999px.
Pourquoi l'arrière-plan déborde-t-il des coins arrondis ?
Les éléments enfants qui ont leur propre arrière-plan peuvent peindre par-dessus les coins. Ajoutez overflow: hidden au parent arrondi, ou donnez à l'enfant le même rayon.
Un coin peut-il être elliptique ?
Oui. CSS accepte deux rayons par coin, séparés par une barre oblique, par exemple border-radius: 50px / 25px. Le générateur écrit la forme circulaire courante ; modifiez le résultat pour ajouter la seconde valeur.
Le border-radius s'applique-t-il aussi à l'ombre ?
Oui. Une box-shadow suit le contour arrondi, les coins correspondent donc. Créez l'ombre avec le Générateur d'Ombre CSS (Box Shadow) et combinez les deux déclarations.
Cet outil est-il gratuit ?
Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.
Comment obtenir mon résultat ?
Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.