Générateur de border-radius CSS

Qu'est-ce que Générateur de border-radius CSS ?

Le générateur de border-radius CSS est un éditeur visuel gratuit pour la propriété CSS border-radius, conçu pour les développeurs front-end et les designers. Utilisez les curseurs et les champs numériques pour définir le rayon horizontal et vertical de chaque angle en pixels, choisissez une unité et activez le mode elliptique pour obtenir la syntaxe avec barre oblique des angles ovales. Une boîte d'aperçu affiche la forme arrondie en temps réel, et la déclaration abrégée compacte est générée pour que vous la copiiez. Choisissez un préréglage comme Arrondi, Pilule, Cercle ou un Blob organique depuis le contrôle segmenté pour démarrer vite, puis affinez chaque angle. Servez-vous-en pour concevoir des cartes douces, des boutons pilule, des cercles parfaits, des squircles et des formes décoratives en goutte sans mémoriser l'ordre des angles.

Comment utiliser Générateur de border-radius CSS

1. Choisissez un préréglage (Arrondi, Pilule, Cercle ou Blob) depuis le contrôle segmenté pour charger une forme de départ.
2. Faites glisser le curseur de chaque angle ou saisissez un nombre pour définir son rayon horizontal.
3. Activez Elliptique pour afficher un second rayon vertical par angle et produire des angles ovales avec la syntaxe à barre oblique.
4. Choisissez l'unité (px ou %) dans les paramètres ; les pourcentages mettent le rayon à l'échelle de la taille de la boîte.
5. Observez l'aperçu en direct se mettre à jour, puis copiez le border-radius abrégé généré dans votre feuille de style.

Exemples

Les quatre angles 16, elliptique désactivé

border-radius: 16px;

Préréglage Pilule, tous les angles 9999

border-radius: 9999px;

HG 40/20, HD 10, BD 40/20, BG 10, elliptique activé

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Questions fréquentes

Dans quel ordre sont les quatre angles ?

L'écriture abrégée liste les angles dans le sens horaire en partant du haut à gauche : haut gauche, haut droite, bas droite, bas gauche. Cet outil affiche toujours les quatre valeurs dans cet ordre, de sorte que le résultat est sans ambiguïté et facile à retoucher à la main ensuite.

À quoi sert le mode elliptique ?

Border-radius peut prendre un rayon horizontal et un rayon vertical par angle, séparés par une barre oblique, pour dessiner des angles ovales (elliptiques) plutôt que circulaires. Activez Elliptique pour définir un second rayon vertical à chaque angle ; la sortie utilise alors la syntaxe à barre oblique 'horizontal / vertical'.

Dois-je utiliser px ou pourcentage ?

Les pixels donnent une taille d'angle fixe, indépendante de la boîte. Les pourcentages sont relatifs à la largeur et à la hauteur de la boîte, donc 50% à chaque angle transforme un carré en cercle parfait et l'arrondi s'adapte au redimensionnement de l'élément. Changez l'unité dans les paramètres.

Comment faire un cercle parfait ou une pilule ?

Choisissez le préréglage Cercle (50% à chaque angle) pour un cercle à partir d'un carré, ou le préréglage Pilule (un très grand rayon en pixels) pour que les côtés courts deviennent de pleins demi-cercles. Vous pouvez aussi partir d'un préréglage et affiner des angles précis.

Mes données sont-elles téléversées quelque part ?

Non. Le générateur s'exécute entièrement dans votre navigateur en JavaScript — vos valeurs de rayon ne sont jamais envoyées à un serveur, il fonctionne donc en privé et même hors ligne une fois la page chargée.