Générateur Border Radius CSS
Contrôlez visuellement les 8 valeurs border-radius.
Créez des formes de gouttes avec aperçu en temps réel.
Aperçu
Le générateur de rayon de bordure CSS vous permet de contrôler visuellement les 8 valeurs border-radius (rayon horizontal et vertical pour chacun des 4 coins) et de prévisualiser le résultat en temps réel.
Au-delà des coins arrondis standards, vous permet de créer des formes de gouttes (blobs) complexes telles que border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — populaires pour les décorations de la section héro. Tout le traitement s'effectue localement dans votre navigateur.
Comment utiliser
Choisissez un préréglage
Commencez par un préréglage (Cercle, Feuille, Tache, etc.) pour obtenir rapidement une forme de base, puis affinez avec les curseurs.
Ajustez les curseurs
Faites glisser les curseurs horizontaux et verticaux pour chaque coin. L'aperçu se met à jour instantanément.
Copiez le CSS
Cliquez sur « Copier » pour copier le CSS généré dans votre presse-papiers et le coller dans votre feuille de style.
Glossaire
- border-radius
- Une propriété CSS qui arrondit les coins d'un élément. Prend en charge les unités px et % pour chaque coin indépendamment.
- Rayon horizontal / vertical
- Les deux rayons d'une ellipse définie par border-radius. Le séparateur "/" divise les valeurs horizontales (avant) et verticales (après).
- Tache (Blob)
- Une forme organique et irrégulière créée en définissant des valeurs border-radius asymétriques sur les 8 axes.
- clip-path
- Une propriété CSS pour découper des éléments en formes personnalisées. Plus flexible que border-radius, mais la syntaxe est plus complexe.
- Shorthand (Raccourci)
- border-radius: 10px 20px 30px 40px — spécifie les quatre coins en une seule déclaration. Utilisez "/" pour séparer l'horizontale et la verticale.
FAQ
- Q.Quelles sont les 8 valeurs ?
- Chacun des 4 coins a un rayon horizontal et vertical, ce qui donne 8 valeurs au total. Format : bordure-rayon : A B C D / E F G H.
- Q.À quoi puis-je utiliser les formes de blob ?
- Décoration d'arrière-plan de la section Héros, masques d'image de profil, formes de boutons CTA, etc.
- Q.Des données sont-elles envoyées à un navigateur ?
- Non. Tout est généré localement dans votre navigateur.
- Q.Est-ce que ça marche dans IE11 ?
- border-radius fonctionne à partir d'IE9. La notation elliptique (avec "/") fonctionne également depuis IE9+.
- Q.Puis-je l'utiliser avec Sass ou Less ?
- Oui. Le code généré est du CSS standard, il fonctionne donc directement avec Sass, Less et Stylus.
Cas d'utilisation
Conception de boutons et de cartes
Créez des formes arrondies uniques pour les boutons et les composants de cartes au-delà des cercles standards.
Décoration d'arrière-plan
Utilisez des formes de gouttes organiques comme arrière-plans de section hero dans vos pages de destination.
Masque d'image de profil
Explorez des masques inhabituels pour les photos de profil, bien au-delà du cercle ou du carré standard.
Apprentissage du CSS
Comprenez visuellement le fonctionnement de border-radius en expérimentant avec les curseurs.
Envoyer des commentaires
Faites-nous part de vos réflexions pour nous aider à améliorer l'outil.
Les commentaires sont temporairement suspendus
Le serveur est occupé ou la protection anti-spam est active. Veuillez réessayer plus tard.