Générateur de border-radius
Créez des border-radius CSS avec aperçu.
Esquinas (horizontal)
border-radius: 16px;Generateur de coins arrondis CSS (border-radius)
La propriete CSS border-radius permet d'arrondir les coins de n'importe quel element HTML, en creant depuis de subtils coins arrondis jusqu'a des formes circulaires completes. C'est l'une des proprietes les plus utilisees en design web moderne, presente dans pratiquement tous les sites web et applications actuels. Boutons, cartes, avatars, images et conteneurs beneficient de coins arrondis qui adoucissent l'interface et creent des designs plus conviviaux et modernes.
Notre generateur vous permet d'ajuster chaque coin individuellement ou de les lier pour les modifier tous en meme temps. Il prend egalement en charge le border-radius elliptique (mode avance), qui utilise la syntaxe a 8 valeurs pour creer des formes organiques et asymetriques plus complexes. La syntaxe elliptique definit des rayons horizontaux et verticaux separes par une barre « / », permettant de creer des formes comme des gouttes, des feuilles et d'autres figures organiques impossibles a realiser avec des rayons uniformes.
L'outil inclut des presets courants comme carre, arrondi, pilule, feuille, goutte et ticket, que vous pouvez utiliser comme point de depart et personnaliser a votre gout. L'apercu se met a jour en temps reel et le code CSS est genere automatiquement, pret a etre copie et colle dans votre projet.
Questions fréquentes
Qu'est-ce que le border-radius elliptique ?
Le border-radius elliptique utilise la syntaxe a 8 valeurs : les 4 premieres definissent les rayons horizontaux et les 4 dernieres les rayons verticaux, separes par « / ». Cela permet de creer des coins avec des courbes asymetriques, produisant des formes organiques plus complexes que le border-radius basique.
Comment creer un cercle parfait ?
Pour creer un cercle parfait, definissez border-radius: 50% sur un element ayant la meme largeur et hauteur. Dans notre generateur, utilisez le preset « Pilule » (100px sur tous les coins) et assurez-vous que votre element est carre.
Est-il compatible avec tous les navigateurs ?
Oui, border-radius est compatible avec tous les navigateurs modernes depuis des annees, y compris Chrome, Firefox, Safari, Edge et Opera. Aucun prefixe de fournisseur n'est necessaire pour les navigateurs actuels.