Générateur de Rayon de Bordure CSS
CSS Border Radius Generator est un outil en ligne gratuit qui vous aide à créer visuellement des coins parfaitement arrondis pour vos éléments HTML. Au lieu de deviner les valeurs des pixels, utilisez des commandes interactives pour ajuster chaque coin indépendamment ou liez-les ensemble pour un arrondi uniforme. L'outil prend en charge les unités de pixels et de pourcentage, propose des formes prédéfinies (cercle, ellipse, feuille, bulle de discussion) et affiche un aperçu en direct de votre élément au fur et à mesure que vous l'ajustez. Copiez instantanément la propriété CSS border-radius générée avec tous les préfixes du fournisseur. Parfait pour créer des interfaces utilisateur de cartes modernes, des avatars circulaires, des boutons en forme de pilule et des formes géométriques créatives.
Ce Qui Est
La propriété CSS border-radius arrondit les coins du bord extérieur de la bordure d'un élément. C'est l'une des propriétés CSS les plus couramment utilisées pour créer des interfaces modernes et attrayantes visuellement. La propriété border-radius peut prendre de 1 à 8 valeurs: -Valeur unique: bordure-rayon: 10px (les quatre coins identiques) - Deux valeurs: border-radius: 10px 20px (en haut à gauche / en bas à droite, en haut à droite / en bas à gauche) -Trois valeurs: rayon de bordure: 10px 20px 30px (en haut à gauche, en haut à droite / en bas à gauche, en bas à droite) - Quatre valeurs: rayon de bordure: 10px 20px 30px 40px (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche dans le sens des aiguilles d'une montre) -Huit valeurs (ellipse): bordure-rayon: 10px 20px 30px 40px / 50px 60px 70px 80px (rayons horizontaux / verticaux pour les coins elliptiques) Sténographie vs. main longue: - Border-rayon: 10px (raccourci, les quatre coins) - bordure-en haut à gauche-rayon: 10px (coin individuel) - bordure-en haut à droite-rayon: 20px - bordure-en bas à droite-rayon: 30px - bordure-en bas à gauche-rayon: 40px Pourcentage par rapport aux valeurs de pixels: - border-radius: 50% (crée un cercle / ellipse par rapport aux dimensions de l'élément) - border-radius: 10px (valeur de pixel fixe, ne s'adapte pas à la taille de l'élément) - Pour les cercles, utilisez 50% sur un élément carré - Pour les formes de pilules, utilisez 9999px ou 50% sur les éléments rectangulaires Cas d'utilisation courants: - Images circulaires / avatars: 50% - Boutons en forme de pilule: 9999px ou 25% de la hauteur - Coins de carte: 8-16px - Modes de dialogue: 8-12px - Formes feuille / feuille: valeurs de rayon asymétriques L'aperçu interactif s'ajuste à mesure que vous modifiez les valeurs des coins, vous aidant à visualiser l'effet instantanément.
Comment utiliser
- Choisissez votre mode de réglage: liez tous les coins pour un arrondi uniforme ou dissociez-les pour ajuster chaque coin indépendamment. L'outil affiche une représentation visuelle des quatre coins (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche).
- Faites glisser les curseurs ou entrez des valeurs de pixels pour ajuster le rayon d'angle. Regardez l'élément d'aperçu se mettre à jour en temps réel lorsque vous modifiez des valeurs. Utilisez le mode pourcentage pour un arrondi réactif ou relatif à la forme.
- Activez le mode ellipse (avancé) pour définir différents rayons horizontaux et verticaux pour chaque coin, créant des coins elliptiques plutôt que circulaires. Cela permet des formes organiques, semblables à des taches.
- Essayez les formes prédéfinies de la galerie: cercle, ellipse, feuille, fleur, goutte de conversation, forme d'onglet,etc. Cliquer sur un préréglage applique instantanément les valeurs de rayon de bordure correspondantes à l'aperçu.
- Comparez l'original et l'arrondi en basculant l'aperçu entre les états pointu et arrondi. Cela vous aide à voir la transformation exacte que votre CSS produira.
- Copiez le code CSS border-radius à partir du panneau de sortie. À la fois le raccourci (par exemple, border-radius: 10px 20px;) et les propriétés individuelles (border-top-left-radius: etc.) sont fournis.
Exemples
Entrée: Taille du fichier: 20px Taille du fichier: 20px Taille du fichier: 0 BR: 0
Processus: Appliquer un rayon asymétrique aux coins
Résultat: rayon de bordure: 20 pixels 20 pixels 0 0;
Entrée: Tous : 50 %
Processus: 50% sur tous les coins crée un cercle / ellipse
Résultat: rayon de bordure: 50%; (Crée un cercle)
Recherches Connexes
Les gens recherchent aussi : générateur de rayon de bordure, rayon de bordure css, coins arrondis, rayon de la frontière.
générateur de rayon de bordurerayon de bordure csscoins arrondisrayon de la frontière
Questions Fréquemment Posées
Comment puis-je créer un cercle parfait?
Pour créer un cercle parfait, l'élément doit être un carré (largeur et hauteur égales) et définir border-radius: 50%. Pour un avatar de 200x200px, utilisez largeur: 200px; hauteur: 200px; rayon de bordure: 50%;. Si l'élément n'est pas carré, 50% crée une ellipse au lieu d'un cercle. Pour les cercles réactifs sans dimensions fixes, utilisez le rapport hauteur / largeur: 1; avec largeur et rayon de bordure: 50%.
Quelle est la valeur maximale de la rayonne de bordure?
Il n'y a pas de valeur maximale stricte pour le rayon de bordure en CSS. Les valeurs supérieures à la moitié de la taille de l'élément créent simplement un effet d'arrondi complet. Pour les boutons en forme de pilule, la pratique courante consiste à utiliser une très grande valeur comme 9999px ou 9999em—cela garantit des côtés entièrement arrondis quelle que soit la hauteur de l'élément. L'utilisation de 50% crée des coins elliptiques (demi-largeur, demi-hauteur de rayon) tandis que 9999px crée des demi-chapeaux plus circulaires.
Puis-je animer le rayon de bordure avec des transitions CSS?
Oui, border-radius est animable. Vous pouvez effectuer une transition en douceur entre différentes valeurs de rayon de bordure: .élément { border-radius: 0; transition: border-radius 0.3 s facilité;} .élément: survol { rayon de bordure: 20px;}. Cela crée des effets de morphing fluides lors des changements de survol ou de classe. L'animation entre les valeurs de pourcentage et de pixel fonctionne dans les navigateurs modernes, bien que l'interpolation ne soit pas toujours parfaitement fluide.
Pourquoi border-radius ne fonctionne-t-il pas sur ma table ou mon image?
border-radius nécessite overflow: hidden (sur le parent) ou des propriétés d'affichage appropriées pour être visibles sur certains éléments. Pour les images, le rayon de bordure coupe le contenu de l'image. Pour les tableaux, vous aurez peut-être besoin de border-collapse: separate; pour que border-radius fonctionne sur les cellules du tableau. Si les coins arrondis ne sont pas visibles, vérifiez si l'élément a overflow: hidden appliqué quelque part en écrêtant l'effet, ou si border-radius est remplacé par des sélecteurs CSS plus spécifiques.
Comment créer une forme de feuille ou de goutte organique?
Pour les formes de feuille, utilisez des valeurs de rayon de bordure asymétriques où les coins opposés ont des rayons très différents (par exemple, rayon de bordure: 0 100px 0 100px pour une feuille horizontale). Pour les formes blob organiques, utilisez la syntaxe d'ellipse à 8 valeurs avec des rayons horizontaux / verticaux variables (par exemple, rayon de bordure: 30% 70% 70% 30% / 30% 30% 70% 70%). CSS peut créer des formes de blob lisses-combinez-les avec une animation pour des effets de blob interactifs.