Aller au contenu principal
LibraTool logoLibraTool

Générateur de bordures arrondies CSS — outil gratuit

Concevez visuellement des coins arrondis avec un contrôle indépendant sur chaque coin. Prend en charge la syntaxe X/Y elliptique pour les formes organiques.

Fonctionne hors ligne une fois chargé
border-radius: 20px 20px 20px 20px;
Unité

Utilisations courantes

  • Formes Organiques de TacheUtilisez la syntaxe elliptique X/Y pour créer des formes de tache uniques pour les sections hero et les illustrations.
  • Coins de Carte et de ConteneurCoins arrondis standard pour les cartes, conteneurs et panneaux en design UI moderne.
  • Formes d'Avatar et de Photo de ProfilCréez le bon style de coin pour les photos de profil : circulaire, squircle ou carré arrondi.
  • Pilules, Étiquettes et InsignesConstruisez des boutons pilule parfaitement arrondis, des étiquettes et des insignes avec le préréglage 9999.
  • Conceptions de Coins AsymétriquesMélangez les rayons entre les coins pour créer des formes de carte et de bouton distinctives et reconnaissables par la marque.

Comment ça marche

Le générateur de border-radius s'exécute entièrement dans le navigateur — il n'y a ni serveur, ni bibliothèque, ni envoi de fichier. Il construit la chaîne de valeur CSS border-radius directement en JavaScript avec l'état React et useMemo, puis l'applique comme style en ligne sur un élément div en direct afin que le moteur CSS du navigateur lui-même rende la forme en temps réel.

  1. 1
    Les curseurs écrivent l'état
    Chaque curseur écrit dans l'une de huit variables d'état numériques — quatre rayons de coin horizontaux et quatre verticaux pour le mode elliptique. Le mode unifié réduit les huit à un seul curseur via une fonction setAll qui synchronise toutes les valeurs à la fois.
  2. 2
    useMemo assemble la valeur CSS
    Un hook useMemo recalcule la chaîne border-radius à chaque changement de valeur de coin, d'unité (px ou %), ou de bascule elliptique. En mode standard, il produit le raccourci à quatre valeurs ; avec l'elliptique activé, il ajoute le séparateur barre oblique pour la syntaxe complète à huit valeurs — par exemple 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Le moteur CSS du navigateur rend l'aperçu
    La chaîne calculée est définie comme style borderRadius en ligne sur un élément div ordinaire. Le moteur de mise en page du navigateur fait tout le rendu — il n'y a ni canevas, ni SVG, ni code de dessin tiers.
  4. 4
    L'API Clipboard copie le résultat
    Cliquer sur Copier appelle navigator.clipboard.writeText avec soit la déclaration CSS (border-radius: ...;), soit la classe Tailwind à valeur arbitraire équivalente (rounded-[...]), selon le format sélectionné.

Outils associés

🎨

Générateur d'ombres portées CSS

Constructeur visuel pour CSS box-shadow avec aperçu en direct, empilement de plusieurs couches, sélecteur de couleur, bascule inset et copie en un clic. Comprend les préréglages Material, neumorphisme et lueur.

Essayer
🟦

Générateur CSS Grid

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Essayer
↔️

Générateur CSS Flexbox

Expérimentez avec la direction flex, le retour à la ligne, la justification et l'alignement sur des éléments en direct — et copiez le CSS.

Essayer

Questions fréquemment posées