Fonctionnement du Générateur de Border Radius
Le Générateur de Border Radius est un outil conçu pour ajuster la rondeur des coins d'une boîte. Il vous permet de contrôler chaque coin individuellement ou de les lier ensemble, tout en choisissant entre les unités en pixels ou en pourcentage. L'outil propose également un mode elliptique pour créer des formes plus douces et organiques en attribuant à chaque coin des rayons horizontaux et verticaux distincts.
Toutes les modifications apportées aux paramètres se traduisent instantanément par la génération du code CSS correspondant à votre design. De plus, l'outil affiche un aperçu visuel qui représente la boîte avec le rayon de bordure appliqué.
Les contrôles et options de l'interface
L'outil propose plusieurs éléments interactifs pour façonner votre boîte:
- Les curseurs: Ils permettent d'ajuster la rondeur des coins sur une plage de 0 à 100.
- Lorsque l'option Lier tous les coins est activée, un curseur unique nommé Tous les coins contrôle les quatre coins simultanément.
- Lorsque les coins sont déliés, quatre curseurs individuels sont disponibles: Haut gauche, Haut droit, Bas droit et Bas gauche. Ils correspondent, dans le sens horaire, aux coins de la boîte.
- En mode elliptique, chaque coin dispose de deux curseurs dédiés: Horizontal et Vertical.
- Le sélecteur d'unité: Il permet de basculer entre les unités px (pixels) et % (pourcentage).
- L'option Lier tous les coins: Une case à cocher pour lier ou délier les réglages des coins.
- L'option Coins elliptiques: Une case à cocher pour activer ou désactiver le mode elliptique.
- Les Préréglages: Des boutons de configuration rapide nommés Net, Arrondi, Cercle, Blob et Feuille.
Au départ, la valeur initiale du curseur est réglée sur 24, ce qui génère le code border-radius: 24px;. Sous la section CSS, vous trouverez le code généré ainsi que le bouton Copier le CSS pour l'enregistrer dans votre presse-papiers.
Différences entre pixels et pourcentages
Le choix de l'unité modifie la manière dont les coins s'arrondissent:
- En pixels (px): Le coin s'arrondit d'une valeur fixe.
- En pourcentage (%): Le coin s'arrondit de manière relative à la boîte. Le pourcentage horizontal s'applique par rapport à la largeur de la boîte, tandis que le pourcentage vertical s'applique par rapport à sa hauteur.
Par exemple, si vous appliquez une valeur de 50 % à tous les coins d'un élément carré, celui-ci se transforme en un cercle parfait.
Le mode elliptique pour des formes organiques
Lorsque l'option Coins elliptiques est désactivée, chaque coin est un quart de cercle défini par un rayon unique.
En activant le mode elliptique, chaque coin obtient un rayon horizontal et un rayon vertical distincts. Cette configuration permet de créer des formes asymétriques, douces et organiques, souvent appelées « blob ».
Sur le plan du code, le générateur écrit la syntaxe CSS spécifique avec une barre oblique (slash) pour séparer les valeurs horizontales et verticales lorsque le mode elliptique est actif. Dès que les coins redeviennent ronds, l'outil repasse automatiquement à la forme courte sans barre oblique.
Techniques pour cercles, pilules et préréglages
Le générateur permet de concevoir facilement des formes spécifiques grâce à des règles précises:
- Créer un cercle parfait: Pour transformer un carré en cercle, liez tous les coins, sélectionnez l'unité en pourcentage (%) et réglez la valeur sur 50 %. Le préréglage Cercle configure automatiquement tous les coins à 50 % pour réaliser cette forme en un clic.
- Créer un bouton en forme de pilule: Conservez l'unité en pixels (px) et glissez le curseur d'un coin au-delà de la moitié de la hauteur de votre bouton. Les côtés de l'élément resteront entièrement arrondis, quelle que soit la largeur de la boîte.
- Utiliser les préréglages: Les boutons de préréglages permettent d'appliquer instantanément des configurations types, comme des formes géométriques nettes, des arrondis classiques, des cercles, des feuilles ou des formes organiques de type "blob".
Confidentialité des données
Chaque forme que vous créez est dessinée directement dans votre navigateur. Aucune des configurations ou des valeurs que vous réglez ici n'est envoyée ou téléchargée sur les serveurs de BroBroGo.
FAQ
Comment fonctionnent les quatre coins et px par rapport à %? Les quatre curseurs correspondent, dans le sens horaire, aux coins haut-gauche, haut-droit, bas-droit et bas-gauche. En pixels, le coin s’arrondit d’une valeur fixe; en pourcentage, il s’arrondit selon la boîte: le pourcentage horizontal suit la largeur et le vertical suit la hauteur, si bien qu’à 50 % un carré devient un cercle.
À quoi sert le mode elliptique? Désactivé, chaque coin est un quart de cercle avec un seul rayon. Activez-le et chaque coin reçoit un rayon horizontal et un rayon vertical distincts: c’est ainsi que l’on crée les formes « blob » douces et organiques. L’outil écrit pour vous la forme à deux groupes séparés par une barre oblique, et revient à la forme courte quand les coins redeviennent ronds.
Comment faire un cercle parfait ou une pilule? Liez les coins, passez en pourcentage et réglez 50 %: un carré devient un cercle. Pour un bouton en forme de pilule, restez en pixels et tirez un coin au-delà de la moitié de la hauteur du bouton; les côtés restent entièrement arrondis quelle que soit la largeur. Le préréglage Cercle prépare le premier cas en un clic.