Que signifie le / dans le rayon de bordure ?

La barre oblique sépare les rayons horizontaux des rayons verticaux. Les valeurs avant la barre oblique définissent les rayons horizontaux et les valeurs après définissent les rayons verticaux pour chaque coin.

Comment faire un cercle avec CSS ?

Appliquez border-radius : 50 % à un élément de largeur et de hauteur égales. Le préréglage Pill à 50 % fonctionne comme un cercle sur des éléments carrés.

Qu'est-ce qu'un cercle ?

Un cercle est une forme intermédiaire entre un carré et un cercle avec des coins légèrement incurvés comme les icônes d'applications iOS.

Puis-je utiliser px ou % pour le rayon de bordure ?

Les deux fonctionnent. Les valeurs en pourcentage sont relatives à la taille de l'élément, donc 50 % crée toujours un cercle. Les valeurs des pixels sont absolues.

Comment fonctionne la bascule des coins de lien ?

Lorsque les coins de lien sont activés, faire glisser n’importe quel curseur de coin met à jour les quatre coins simultanément.

Quel est le raccourci le plus compact du rayon de bordure ?

border-radius accepte 1, 2, 3 ou 4 valeurs correspondant à tous les coins, paires opposées ou coins individuels dans le sens des aiguilles d'une montre.

Quelle classe Tailwind équivaut aux coins arrondis ?

Tailwind arrondi-sm est de 2px, arrondi est de 4px, arrondi-md est de 6px, arrondi-lg est de 8px, arrondi-xl est de 12px, arrondi-2xl est de 16px, arrondi-3xl est de 24px et arrondi-plein est de 9999px.

Puis-je appliquer un rayon de bordure aux images ?

Oui. border-radius fonctionne sur n'importe quel élément, y compris img. Combiné avec overflow : caché sur un conteneur, vous pouvez découper des images sous n’importe quelle forme.

Qu'est-ce qu'une forme de bulle de discussion en CSS ?

Une bulle de discussion est un rectangle arrondi avec une queue pointue, généralement créée avec un rayon de bordure pour le corps principal et un pseudo-élément CSS pour la queue.

Le rayon de la bordure affecte-t-il la zone de clic ?

Non, le rayon de bordure est purement visuel. La zone de clic reste le cadre de délimitation rectangulaire de l'élément.

CSS Border Radius Generator

Nouveau

Générez un border-radius CSS avec un contrôle simple ou elliptique par coin et des préréglages de formes.

Gratuit pour toujours

Sans inscription

Sans stockage

Préréglages

Lier tous les coins

border-radius: 8px;

Outils associés

CSS Box Shadow Generator

developer

Create multi-layer CSS box shadows with live preview, 12 presets, and Tailwind equivalents.

Try it free

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

Intégrer cet outil

Ajoutez cet outil à votre site avec un extrait iframe.

<iframe src="https://dukotools.com/tools/border-radius-generator?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="border-radius-generator tool"></iframe>

About CSS Border Radius Generator

CSS Border Radius Generator produit un CSS de rayon de bordure correct pour n'importe quelle forme, des simples coins arrondis aux rayons elliptiques complexes à 8 valeurs. Le mode simple applique un rayon égal aux quatre coins avec un seul curseur. Le mode avancé propose des curseurs indépendants pour chaque coin avec une bascule de lien-coins. La bascule des rayons elliptiques déverrouille le deuxième ensemble de quatre valeurs dans border-radius – les rayons X et Y par coin indépendamment. Cela permet des formes asymétriques comme des larmes, des feuilles et des formes organiques. Les préréglages de forme couvrent : Carré, Arrondi, Pilule, Cercle, Cercle, Feuille, Larme et Bulle de discussion. La sortie montre le raccourci CSS valide le plus compact et la classe équivalente Tailwind.

Principales fonctionnalités

Modes simple et avancé
Mode curseur unique ou curseurs indépendants par coin avec bascule de coin de lien.
Mode rayons elliptiques
Débloque les rayons X et Y par coin pour le raccourci CSS complet à 8 valeurs.
Aperçu en temps réel
Aperçu du rectangle en direct montrant le rayon de bordure actuel appliqué instantanément.
8 préréglages de forme
Préréglages Carré, Arrondi, Pilule, Cercle, Squircle, Feuille, Larme et Chat Bubble.
Raccourci CSS compact
Génère le raccourci valide le plus compact à l’aide des règles de compression border-rayon.
Équivalent vent arrière
Affiche la classe Tailwind arrondie-*, le cas échéant.

Comment utiliser

1
Choisissez le mode Simple ou Avancé
Mode simple pour des coins égaux, mode avancé pour un contrôle par coin.
2
Ajuster les curseurs
Faites glisser les curseurs de rayon de coin et regardez la mise à jour de la forme d'aperçu en temps réel.
3
Activer l'elliptique (facultatif)
Activez les rayons elliptiques pour obtenir des rayons X et Y indépendants par coin pour les formes organiques.
4
Ou chargez un préréglage
Cliquez sur n’importe quelle vignette prédéfinie de forme pour charger sa configuration.
5
Copiez le CSS
Copiez la règle CSS complète ou simplement la valeur border-radius.

Cas d'utilisation réels

Style d'avatar

Un développeur utilise le préréglage du cercle pour générer un rayon de bordure : 50 % pour les composants de l'avatar de l'utilisateur.

Conception de composants personnalisés

Un concepteur utilise le mode elliptique pour créer un élément décoratif en forme de feuille pour une page de destination sur le thème de la nature.

Composant de la carte

Un développeur d'interface utilisateur utilise le préréglage arrondi et le mode avancé pour appliquer des coins supérieurs plus grands et des coins inférieurs plus petits pour une conception de carte empilée.

Foire aux questions

Related Free Tools

Explore these tools that work great alongside CSS Border Radius Generator:

CSS Box Shadow Generator

Create multi-layer CSS box shadows with live preview, 12 presets, and Tailwind equivalents.

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.