Générateur de rayon de frontière
Générez visuellement des valeurs de rayon de bordure CSS avec notre générateur gratuit de rayon de bordure. Faites glisser 8 poignées d'angle indépendantes pour créer des cercles, des pilules, des blobs et des formes arrondies personnalisées - obtenez instantanément une sortie CSS abrégée et longue prête à être copiée. Tous les traitements s'exécutent localement dans votre navigateur. Aucune inscription requise.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time - copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
Pourquoi utiliser notre générateur de rayon de bordure ?
- Génération instantanée de rayon de bordure CSS : générez visuellement des valeurs de rayon de bordure CSS et obtenez une sortie CSS prête à être copiée en temps réel. Notre générateur de rayon de bordure met à jour l'aperçu et le CSS à chaque déplacement du curseur - aucune pression sur un bouton n'est nécessaire, aucune inscription requise.
- Générateur de rayon de bordure sécurisé en ligne : toute la génération CSS s'effectue localement dans votre navigateur à l'aide de JavaScript. Vos configurations de conception ne quittent jamais votre appareil, garantissant une confidentialité à 100 % lorsque vous utilisez notre générateur de rayon de bordure en ligne.
- Générateur de rayon de bordure en ligne - Aucune installation : utilisez notre générateur de rayon de bordure directement dans votre navigateur sans téléchargements, plugins ou Node.js requis. Générez des valeurs CSS border-radius depuis n’importe quel appareil, à tout moment.
- Contrôle à 8 points et 10 préréglages de forme : définissez des rayons horizontaux et verticaux indépendants pour les 4 coins (8 valeurs au total) pour créer des cercles, des pilules, des blobs, des feuilles et des formes organiques. Choisissez parmi 10 préréglages intégrés ou liez tous les coins pour les modifier ensemble. Produit des formats de variables abrégés, longs et CSS.
Cas d'utilisation courants du générateur de rayon de bordure
- Conception de composants d'interface utilisateur : les développeurs frontend utilisent notre générateur de rayon de bordure pour concevoir des coins arrondis pour les boutons, les cartes, les modaux et les champs de saisie. Faites glisser les poignées pour trouver le rayon parfait et copiez le CSS directement dans votre feuille de style.
- Jetons de système de conception : les ingénieurs de systèmes de conception utilisent notre générateur de rayon de bordure pour définir des jetons de rayon de bordure cohérents. La sortie de la variable CSS correspond directement aux fichiers de jetons de conception pour Tailwind, les jetons Figma et le dictionnaire de styles.
- Création de gouttes et de formes organiques : les concepteurs utilisent notre générateur de rayon de bordure pour créer des formes de gouttes organiques pour les sections de héros, les avatars et les éléments décoratifs. L'interface à 8 points permet d'obtenir des formes totalement asymétriques qui seraient impossibles à calculer manuellement.
- Icônes d'application et cadres d'avatar : les développeurs mobiles utilisent notre générateur de rayon de bordure pour créer la forme de cercle utilisée pour les icônes d'application iOS et les icônes adaptatives Android. Le préréglage Squircle (30 %) produit instantanément la forme carrée arrondie correcte.
- Éléments visuels de la page de destination : les concepteurs marketing utilisent notre générateur de rayon de bordure pour créer des CTA en forme de pilule, des cadres d'image arrondis et des formes décoratives pour les pages de destination. Les préréglages Pill et Blob sont particulièrement populaires pour les pages de destination SaaS modernes.
- Apprentissage du rayon de bordure CSS : les développeurs apprenant le CSS utilisent notre générateur de rayon de bordure pour comprendre le fonctionnement de la syntaxe du rayon de bordure à 8 valeurs. L'aperçu en direct montre immédiatement comment chaque valeur de rayon horizontal et vertical affecte la forme.
Comprendre le rayon de bordure CSS
- Comment fonctionne notre générateur de rayon de bordure : cliquez sur l'un des 10 préréglages de forme (pointu, arrondi, carte, cercle, pilule, écureuil, goutte, feuille, œuf, diamant) pour appliquer instantanément une forme de départ. Ou partez de la forme asymétrique par défaut et ajustez les curseurs manuellement.
- Faites glisser les 8 poignées de coin : chaque coin comporte deux curseurs : rayon horizontal (X) et vertical (Y). Faites glisser les curseurs ou saisissez directement les valeurs. Activez « Lier tous les coins » pour modifier les 8 valeurs simultanément. Basculez entre les unités px et % à tout moment.
- Copiez le CSS généré : le générateur de rayon de bordure génère quatre formats CSS en temps réel : raccourci (bordure-rayon), long (propriétés de coin individuelles), règle CSS complète avec sélecteur et déclarations de variables CSS. Cliquez sur n’importe quel bouton Copier pour copier le format dont vous avez besoin.
- Formats de sortie CSS border-radius : lorsque tous les coins sont égaux, affiche border-radius : 16px. Lorsque les coins diffèrent mais que X = Y, génère la forme à 4 valeurs. Lorsque X≠Y, génère la forme complète à 8 valeurs avec un séparateur barre oblique.
Foire aux questions
Un générateur de rayon de bordure est un outil visuel qui vous permet de définir les valeurs de rayon de bordure CSS en faisant glisser les poignées sur une forme d'aperçu et d'afficher le CSS prêt à être copié. Notre générateur de rayon de bordure prend en charge les 8 valeurs de coin individuelles (x supérieur gauche, y supérieur gauche, etc.) pour les formes entièrement asymétriques - aucune inscription requise.
Le générateur de rayon de bordure génère le raccourci border-radius lorsque tous les coins sont égaux, ou la syntaxe complète à 8 valeurs (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius) lorsque les coins diffèrent. Il génère également les déclarations de variables CSS pour les workflows de jetons de conception.
La syntaxe à 4 valeurs (par exemple 20px 40px 20px 40px) définit le même rayon horizontal et vertical pour chaque coin. La syntaxe à 8 valeurs (par exemple 20px 40px 20px 40px / 10px 20px 10px 20px) définit des rayons horizontaux et verticaux indépendants pour chaque coin, permettant des formes de gouttes elliptiques et organiques.
Oui. Toute génération CSS s'effectue localement dans votre navigateur à l'aide de JavaScript. Aucune donnée n'est envoyée à un serveur, garantissant une confidentialité totale pour votre travail de conception.
Oui! Notre générateur de rayon frontalier est 100 % gratuit, sans inscription, sans compte et sans limite d'utilisation. Générez des valeurs CSS border-radius pour n’importe quel projet directement dans votre navigateur.
Oui. En définissant différents rayons horizontaux et verticaux pour chaque coin à l'aide de l'interface de poignée à 8 points, vous pouvez créer des formes de gouttes organiques, des formes de pilules, des formes de feuilles et d'autres formes arrondies asymétriques. Le générateur de rayon de bordure génère la syntaxe CSS complète à 8 valeurs pour ces formes.
Le générateur de rayon de bordure comprend des préréglages pour les formes courantes : Cercle (50 %), Pilule (9999 px), Arrondi (8 px), Carte (16 px), Squircle (30 %), Blob (forme organique asymétrique), Feuille (asymétrique) et Sharp (0 px). Cliquez sur n’importe quel préréglage pour l’appliquer instantanément et voir la sortie CSS.
Oui. Le générateur de rayon de bordure affiche le CSS généré dans un bloc de code avec un bouton de copie en un clic. Vous pouvez également copier des valeurs de propriété individuelles ou la règle CSS complète, y compris le sélecteur.
Oui. Vous pouvez basculer entre les unités px et % dans le générateur de rayon de bordure. Les valeurs en pourcentage sont relatives aux dimensions de l'élément : 50 % crée un cercle pour les éléments carrés et une ellipse pour les éléments rectangulaires.