Générateur de Border Radius
Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
Que signifie la syntaxe à 8 valeurs de border-radius ?
Dans la syntaxe border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, les valeurs avant la barre oblique sont les rayons horizontaux (haut gauche, haut droite, bas droite, bas gauche) et celles qui suivent sont les rayons verticaux. Utiliser des valeurs différentes dans chaque direction crée les formes blob organiques.
Comment utiliser le CSS généré ?
Copiez la ligne border-radius et collez-la dans n'importe quelle règle CSS de l'élément à façonner, par exemple .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Cela fonctionne en CSS pur, Sass, valeurs arbitraires Tailwind et styles en ligne.
Où les formes blob sont-elles utilisées ?
Les formes blob sont très populaires pour les illustrations de héros, avatars, photos de profil, cartes de fonctionnalités, boutons et fonds décoratifs dans le design web et applicatif moderne.
Les coins arrondis fonctionnent-ils sur tous les navigateurs ?
Oui. border-radius est pris en charge par tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et les navigateurs mobiles, sans préfixes constructeur.
Puis-je animer la forme blob ?
Oui. border-radius est une propriété animable : une transition CSS permet de se métamorphoser en douceur entre les formes, par exemple .blob { transition: border-radius .8s ease; }.
Quelle est la différence entre les syntaxes à 4 et à 8 valeurs ?
La forme à 4 valeurs attribue le même rayon horizontal et vertical à chaque coin, suffisant pour des pilules ou des cercles. Celle à 8 valeurs sépare les rayons horizontaux et verticaux, ce qui permet des formes asymétriques et organiques.
Comment créer un cercle parfait ?
Réglez les huit valeurs sur 50 % pour un élément carré, ou utilisez simplement border-radius: 50 %. Vous pouvez aussi partir d'un préréglage proche du cercle et l'affiner.
Mes données sont-elles envoyées quelque part ?
Non. Le générateur fonctionne entièrement dans votre navigateur en CSS et JavaScript purs. Rien de ce que vous déplacez, saisissez ou copiez n'est envoyé à un serveur.
Puis-je l'utiliser sur des éléments non carrés ?
Oui, mais les rayons en pourcentage sont relatifs aux dimensions de l'élément : un rectangle produira des coins elliptiques et un rendu différent de l'aperçu carré. Utilisez les valeurs générées comme point de départ puis ajustez.
Comment utiliser Générateur de Border Radius
Le border-radius à huit valeurs produit des formes organiques en blob, aux coins elliptiques, qu'un simple rectangle arrondi ne peut égaler. Sculptez la forme avec les poignées et copiez le CSS prêt à l'emploi — tout se rend en direct dans votre navigateur.
- Saisissez l'une des huit poignées posées sur les bords de la forme — celles des bords haut et bas règlent les rayons horizontaux, celles des côtés les rayons verticaux.
- Cliquez sur l'un des six carrés de formes prédéfinies pour partir d'un blob déjà dessiné, puis affinez les valeurs dans les champs Rayons horizontaux et Rayons verticaux (un par coin, 0–100 %).
- Pressez Aléatoire pour générer une nouvelle forme organique en un clic, ou Réinitialiser pour revenir à la forme et aux couleurs par défaut.
- Choisissez une Couleur de la forme et un Arrière-plan pour visualiser le blob sur votre palette cible — les deux se mettent à jour instantanément.
- Pressez Copier le CSS pour récupérer la déclaration border-radius affichée en direct dans la barre du bas et collez-la sur n'importe quel élément.
Appliquez le code à un élément carré avec overflow: hidden pour l'effet blob classique ; les pourcentages gardent la courbe fluide à toutes les tailles, et la barre de la syntaxe sépare les rayons horizontaux des verticaux.
Outils associés
- Générateur de Border Radius CSS Générateur visuel de border-radius CSS. Ajustez chaque coin indépendamment avec aperçu en temps réel et copiez le code CSS instantanément.
- Générateur de Dégradés CSS Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
- Générateur de Box Shadow CSS Générateur en ligne gratuit de box-shadow CSS. Créez visuellement de belles ombres avec décalage, flou, étalement, couleur et inset ajustables. Aperçu en direct et copie instantanée.
- Générateur de Palette de Couleurs Créez de belles palettes de couleurs harmonieuses instantanément avec notre générateur en ligne gratuit. Prend en charge les modes monochromatique, analogue, complémentaire, triadique, split-complémentaire et tétradique. Ajustez les couleurs avec les curseurs HSL, verrouillez les favoris et exportez en CSS, Tailwind, JSON ou SVG. 100% basé sur le navigateur, vos données ne quittent jamais votre appareil.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur d'Easing CSS Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
- Générateur de Text Shadow CSS Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.
- Générateur de Clip Path CSS Générateur en ligne gratuit de clip-path CSS. Créez des formes polygon, circle, ellipse et inset avec des points déplaçables, aperçu en direct et copie du code CSS en un clic.