Générateur de coins arrondis et de formes
Ajustez les rayons horizontaux et verticaux des quatre coins en px ou en % et prévisualisez la forme. Copiez ou enregistrez le CSS border-radius généré. La largeur, la hauteur et la couleur de l'aperçu ne sont pas incluses dans le CSS.
Ce que vous pouvez faire
Ajuster l’arrondi à partir d’un préréglage
Choisissez parmi 8 préréglages, notamment coins arrondis, capsule et feuille, puis ajustez les rayons. La sélection d’un préréglage remplace les rayons et l’unité.
Définir un arrondi différent pour chacun des quatre coins
Désactivez le paramètre de rayon identique pour saisir séparément les rayons horizontaux et verticaux des coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche.
Vérifier et récupérer le CSS
Générez le CSS après avoir vérifié la forme. Choisissez entre la déclaration raccourcie et les déclarations individuelles des coins, puis copiez le code ou enregistrez-le dans un fichier CSS.
Mode d’emploi
Choisir un préréglage et une unité
Saisissez directement les rayons ou choisissez un préréglage à ajuster. Le changement d’unité ne convertit pas les nombres.
Comparer l’arrondi et la forme
Saisissez une seule valeur pour utiliser le même rayon. Pour le faire varier selon les coins, décochez l’option et ajustez les valeurs horizontale et verticale.
Vérifier la taille si nécessaire
Dans les paramètres de l’aperçu, vous pouvez modifier la largeur, la hauteur et la couleur d’aperçu. Ces paramètres ne sont pas inclus dans le CSS de sortie.
Générer le CSS, puis le copier ou l’enregistrer
Appuyez sur « Générer le CSS » et choisissez le format souhaité. Si vous modifiez les rayons, l’unité ou la taille, relancez la génération.
Utile pour
Donner une forme aux coins des cartes et des boutons
Créer du CSS pour des composants de page en arrondissant les quatre coins de façon identique ou uniquement les coins supérieurs.
Créer un arrière-plan arrondi asymétrique
Modifier l’arrondi horizontal et vertical de chaque coin pour créer des contours en forme de feuille ou organiques.
Lien entre les rayons, les unités et la taille affichée
Les directions horizontale et verticale s’appliquent au même coin
Le rayon horizontal détermine l’arrondi horizontal et le rayon vertical l’arrondi vertical. Un coin n’est pas arrondi si l’une de ces valeurs est égale à 0. Indiquez les quatre coins dans le sens horaire à partir du coin supérieur gauche.
Les % utilisent séparément la largeur et la hauteur comme références
Les valeurs horizontales en % sont relatives à la largeur de l’élément, et les valeurs verticales à sa hauteur. Même avec les mêmes nombres, le résultat diffère entre un carré et un rectangle haut ou large. px indique directement une longueur.
Les rayons trop grands sont réduits dans la même proportion
Si la somme des rayons adjacents dépasse la longueur du côté, les huit rayons affichés sont réduits selon un facteur commun. Les valeurs saisies et le CSS généré restent inchangés. Après la génération, les détails indiquent les rayons utilisés pour l’aperçu.
Formes de contour possibles avec les coins arrondis
border-radius transforme les coins en courbes elliptiques. Cette propriété ne permet pas de créer des indentations ni des polygones arbitraires. Le préréglage squircle approche cette forme avec des coins elliptiques, sans reproduire exactement la courbe mathématique.
Foire aux questions
Puis-je définir un arrondi différent pour chaque coin ?
Oui. Décochez « Utiliser le même rayon pour tous les coins » pour saisir séparément les rayons horizontal et vertical de chaque coin. Cochez à nouveau cette option pour définir tous les rayons selon le rayon horizontal en haut à gauche.
Les nombres sont-ils convertis lorsque je change d’unité ?
Non. Les nombres sont conservés et seule l’unité change. Si une valeur supérieure à 100 reste après le passage des px aux %, saisissez-la à nouveau dans la plage de 0 à 100.
La taille et la couleur de l’aperçu sont-elles incluses dans le CSS ?
Non. La sortie contient uniquement les déclarations border-radius. Définissez la largeur, la hauteur et la couleur d’arrière-plan dans la page ou le composant où vous utilisez le code.
Pourquoi la forme affichée a-t-elle des coins moins arrondis que les rayons saisis ?
Le navigateur réduit les rayons affichés selon une même proportion afin d’éviter le chevauchement des courbes des coins. Vous pouvez consulter le facteur de réduction et les valeurs en px de chaque coin sous « Rayons utilisés pour l’affichage ».
Saisie et résultats
- Rayons
- Indiquez les 8 valeurs dans la même unité : de 0 à 100 % ou de 0 à 9 999 px. Les valeurs décimales sont également acceptées.
- Aperçu
- La largeur et la hauteur de l’aperçu sont des entiers compris entre 1 et 400 px. Une largeur qui ne tient pas peut être parcourue horizontalement dans le champ.
- Résultat
- Déclaration raccourcie border-radius ou déclarations pour chacun des quatre coins. Copiez ou enregistrez border-radius.css.
- Non inclus
- Largeur, hauteur, couleur d’arrière-plan et exportations d’images ou de SVG.