Fonctionnement de la propriété CSS border-radius
La propriété CSS border-radius définit la rondeur des coins de la bordure d'un élément. Le Générateur de Border Radius permet d'ajuster visuellement cette rondeur pour chaque coin d'une boîte, individuellement ou de manière liée, en utilisant des pixels ou des pourcentages.
L'outil propose également un mode elliptique pour concevoir des formes plus douces et organiques en attribuant à chaque coin des rayons horizontaux et verticaux distincts. Le code CSS correspondant est généré instantanément au fur et à mesure des modifications.
Configuration des entrées du générateur
L'interface utilisateur propose plusieurs contrôles précis pour ajuster la géométrie de la boîte:
- Curseurs: Ils permettent de régler la rondeur des coins sur une plage de valeurs allant de 0 à 100.
- Lorsque l'option Lier tous les coins est activée, un curseur unique nommé Tous les coins contrôle l'ensemble des quatre coins.
- Lorsque les coins sont déliés, quatre curseurs distincts apparaissent: Haut gauche, Haut droit, Bas droit et Bas gauche.
- En activant le mode Coins elliptiques, chaque coin se dote de deux curseurs supplémentaires: Horizontal et Vertical.
- Sélecteur d'unité: Permet de basculer entre les pixels (px) et le pourcentage (%).
- Bouton de bascule Lier tous les coins: Active ou désactive la synchronisation des curseurs.
- Bouton de bascule Coins elliptiques: Active ou désactive le mode elliptique.
- Préréglages: Des boutons de configuration rapide permettent d'appliquer instantanément des formes définies: Net, Arrondi, Cercle, Blob et Feuille.
La valeur initiale du curseur est fixée à 24, ce qui génère le code border-radius: 24px; au premier chargement.
Visualisation et récupération du code CSS
Le générateur affiche en temps réel les résultats des manipulations à travers deux modules principaux:
- Aperçu: Une représentation visuelle de la boîte qui applique immédiatement les modifications de rayon de bordure.
- CSS: Le code CSS généré s'affiche sous la rubrique CSS. Le bouton Copier le CSS permet de copier ce code directement dans le presse-papiers pour l'intégrer dans une feuille de style.
Chaque coin est tracé directement dans votre navigateur. Rien de ce que vous configurez ici n'est téléversé vers BroBroGo.
Différence entre les unités en pixels et en pourcentages
Le choix de l'unité modifie fondamentalement le comportement de l'arrondi lors du redimensionnement de l'élément:
- En pixels (px): Le coin s'arrondit selon une valeur fixe et absolue, indépendante des dimensions de la boîte. L'arrondi reste identique, que la boîte mesure 100 px ou 1000 px de large.
- En pourcentage (%): L'arrondi devient relatif aux dimensions de la boîte. Le rayon horizontal s'adapte à la largeur de l'élément, tandis que le rayon vertical s'adapte à sa hauteur. Cette approche est essentielle pour le design adaptatif (responsive design), car elle permet aux arrondis de se déformer proportionnellement à la taille de l'écran.
Techniques pour les cercles et les boutons pilules
Le générateur permet de concevoir facilement deux structures classiques du design web:
- Le cercle parfait: Pour transformer un élément carré en cercle parfait, il suffit de lier tous les coins, de sélectionner l'unité en pourcentage (%) et de régler le curseur à 50. Le préréglage Cercle applique automatiquement cette configuration.
- Le bouton en forme de pilule: Pour créer un bouton de type pilule dont les flancs restent parfaitement semi-circulaires quelle que soit la largeur, il faut conserver l'unité en pixels (px) et glisser le curseur au-delà de la moitié de la hauteur de la boîte. Les côtés conserveront leur arrondi maximal sans déformation, même si la largeur de l'élément augmente.
Formes avancées avec le mode elliptique
Par défaut, lorsque le mode elliptique est désactivé, chaque coin est un quart de cercle défini par un seul rayon.
L'activation du mode Coins elliptiques permet d'attribuer un rayon horizontal et un rayon vertical distincts pour chaque coin. Cette distinction permet de créer des formes asymétriques et organiques, souvent qualifiées de « blobs ».
Sur le plan du code, le générateur adapte automatiquement la syntaxe CSS:
- Mode standard: Utilise la forme courte classique (par exemple,
border-radius: 24px;). - Mode elliptique: Écrit la syntaxe CSS à deux valeurs séparées par une barre oblique (par exemple,
border-radius: 10px / 20px;), où les valeurs situées avant la barre oblique représentent les rayons horizontaux et celles situées après représentent les rayons verticaux. Si les coins redeviennent ronds, le générateur bascule automatiquement vers la forme courte.
FAQ
Comment fonctionnent les quatre coins et la différence entre px et %? Les quatre curseurs correspondent, dans le sens horaire, aux coins haut-gauche, haut-droit, bas-droit et bas-gauche. En pixels, un coin s'arrondit selon une valeur fixe; en pourcentage, il s'arrondit par rapport à la boîte — un pourcentage horizontal suit la largeur et un pourcentage vertical suit la hauteur, de sorte que 50 % transforme un carré en cercle.
À quoi sert le mode elliptique? Lorsqu'il est désactivé, chaque coin est un quart de cercle avec un seul rayon. Activez-le et chaque coin obtient un rayon horizontal et vertical distinct, ce qui vous permet de créer des formes organiques de type « blob ». Le générateur écrit pour vous la syntaxe à deux valeurs séparées par une barre oblique et revient à la forme courte dès que les coins redeviennent ronds.
Comment puis-je créer 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, conservez plutôt les pixels et glissez un coin au-delà de la moitié de la hauteur du bouton — les côtés restent entièrement arrondis, peu importe la largeur. Le préréglage Cercle configure le premier cas en un seul clic.