Developer ToolsGénérateur de Rayon de Bordure
Créez visuellement des formes CSS complexes avec border-radius et contrôle indépendant des coins. Aperçu en direct et copie instantanée du code CSS prêt à l'emploi.
Paramètres des coins
Unité:
Aperçu et code CSS
border-radius: 8px
Raccourci
.element {
border-radius: 8px;
}Complet
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}Outils associés
À propos du Générateur de Rayon de Bordure
Comment ça fonctionne
- Ajustez chaque coin à l'aide des curseurs ou des champs numériques
- Activez 'Lier tous les coins' pour contrôler les quatre coins simultanément
- Sélectionnez une unité (px ou %) selon le type de taille souhaité
- Utilisez les presets pour appliquer des formes courantes comme cercle, pilule ou carré
- Personnalisez la couleur de fond et la couleur de l'élément pour un aperçu réaliste
- Copiez le CSS raccourci ou complet généré en un clic
Cas d'utilisation courants
- Concevoir des boutons, cartes et champs de saisie aux coins arrondis
- Créer des étiquettes et badges en forme de pilule dans la conception UI
- Construire des avatars et icônes circulaires avec border-radius à 50%
- Générer des formes asymétriques uniques pour des mises en page créatives
- Prototyper des composants UI avec un contrôle précis des coins
- Apprendre et expérimenter avec les valeurs CSS border-radius
Questions fréquentes
Qu'est-ce que CSS border-radius ?
CSS border-radius est une propriété qui arrondit les coins de la boîte de bordure d'un élément. Elle accepte de une à quatre valeurs définissant les rayons des coins supérieur gauche, supérieur droit, inférieur droit et inférieur gauche.
Comment utiliser le Générateur de Rayon de Bordure ?
Utilisez les curseurs ou les champs numériques pour ajuster chaque coin indépendamment. L'aperçu en direct se met à jour instantanément et vous pouvez copier le code CSS généré en un clic.
Puis-je définir une valeur différente pour chaque coin ?
Oui. Désactivez l'option 'Lier tous les coins' pour contrôler chaque coin (supérieur gauche, supérieur droit, inférieur droit, inférieur gauche) indépendamment pour des formes asymétriques.
Quelle est la différence entre CSS raccourci et complet ?
La propriété raccourcie border-radius définit les quatre coins en une seule fois. Les propriétés complètes (border-top-left-radius, etc.) définissent chaque coin individuellement.
Comment faire un cercle avec CSS border-radius ?
Définissez border-radius à 50% sur un élément carré. Utilisez le preset 'Cercle' dans cet outil pour l'appliquer instantanément.
Comment faire une forme de pilule/capsule ?
Définissez border-radius avec une valeur très élevée (par exemple, 9999px) pour créer une forme de pilule. Utilisez le preset 'Pilule' pour l'appliquer en un clic.
Est-ce que border-radius supporte les valeurs en pourcentage ?
Oui. Les valeurs en pourcentage sont relatives aux dimensions de l'élément : 50% crée une forme circulaire sur un élément carré. Cet outil supporte les unités en pixels (px) et en pourcentage (%).
Que signifient deux valeurs dans le raccourci border-radius ?
Avec deux valeurs, la première s'applique aux coins supérieur gauche et inférieur droit, et la seconde aux coins supérieur droit et inférieur gauche.
Le CSS généré est-il compatible avec tous les navigateurs ?
Oui. La propriété border-radius est supportée dans tous les navigateurs modernes et Internet Explorer 9+.
Puis-je prévisualiser la forme avec une couleur de fond ?
Oui. L'aperçu en direct affiche la forme avec une couleur de fond personnalisable pour que vous voyiez exactement l'apparence des coins arrondis.
Comment réinitialiser aux valeurs par défaut ?
Cliquez sur le bouton 'Réinitialiser' pour restaurer tous les coins à 8px, la valeur par défaut utilisée dans la plupart des frameworks UI.
Quels presets sont disponibles ?
Cet outil inclut des presets pour les formes courantes : Carré (0px), Léger (4px), Arrondi (8px), Extra Arrondi (16px), Pilule (9999px) et Cercle (50%).