Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de border-radius CSS

CSS Border Radius Generator

Façonnez quatre coins en pixels ou en pourcent, liés ou indépendants — de l'arrondi uniforme aux formes organiques — et copiez la déclaration à quatre valeurs.

Parcours de la tâche / de l'entrée au résultat

Choisissez l'unité

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de border-radius CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment façonner un border-radius CSS

  1. 01

    Choisissez l'unité

    Réglez Unité sur Pixels ou Pourcent — l'espace de travail démarre en Pixels. Les pixels restent constants quelle que soit la taille de l'élément ; les valeurs en pourcent s'adaptent à l'élément, ce qui rend possibles les formes organiques et asymétriques.

  2. 02

    Ajustez les quatre coins

    Déplacez Haut gauche, Haut droit, Bas droit et Bas gauche — chacun de 0 à 100 dans l'unité choisie, par pas de 1. Les quatre démarrent à 24 px, et la carte d'aperçu se redessine à chaque modification.

  3. 03

    Liez ou déliez les coins

    Gardez Lier tous les coins activé pour modifier chaque coin d'un coup, ou désactivez-le pour façonner chaque coin indépendamment. L'espace de travail l'indique à côté de l'interrupteur : modifier un coin met à jour les quatre tant qu'ils sont liés.

  4. 04

    Essayez la forme d'exemple

    Cliquez sur Charger un exemple pour une référence asymétrique : Haut gauche et Bas droit à 64 px, Haut droit et Bas gauche à 12 px, déliés — la forme de feuille en diagonale utilisée sur les cartes et les avatars. Réinitialiser ramène au 24 px uniforme par défaut.

  5. 05

    Vérifiez la déclaration générée

    La sortie liste toujours quatre valeurs dans le sens horaire — haut-gauche, haut-droit, bas-droit, bas-gauche — pour que chaque coin reste explicite au collage. Le badge d'état affiche CSS VALIDE, et tout coin hors limites le fait basculer sur VÉRIFIER LES VALEURS et bloque la copie.

  6. 06

    Copiez ou téléchargez le CSS

    Cliquez sur Copier le CSS pour copier la règle .rounded-card sous forme de déclaration border-radius à quatre valeurs, ou sur Télécharger le .css pour l'enregistrer sous toolars-border-radius.css. La même déclaration fonctionne sur les images, les boutons, les cartes et tout autre élément.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de border-radius CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de border-radius CSS fait vraiment

Les coins arrondis donnent le ton d'une interface : 8 px pour un formulaire discret, 24 px pour une carte conviviale, des valeurs franchement asymétriques pour la tache organique derrière une section d'accueil. Deviner quatre nombres dans une feuille de style est lent, surtout en pourcent, où la courbe dépend des proportions de l'élément. Générateur de border-radius CSS montre la forme exacte pendant que vous faites glisser, avec les coins liés pour un arrondi uniforme ou déliés pour les formes en feuille ou en tache. Il vous remet ensuite la déclaration — rendue et validée localement.

Questions fréquentes

Quelle différence entre Pixels et Pourcent ?
Les pixels donnent à chaque coin un rayon fixe quelle que soit la taille de l'élément. Le pourcent se résout par rapport aux dimensions de l'élément, donc la même valeur produit une courbe différente sur une carte haute et sur une carte large — c'est exactement cette relativité qui rend possibles les formes d'ellipse et de tache.
Que fait Lier tous les coins ?
Tant que les coins sont liés, modifier l'un d'eux met les quatre à la même valeur, ce qui garde l'arrondi uniforme rapide. Désactivez l'interrupteur pour contrôler Haut gauche, Haut droit, Bas droit et Bas gauche indépendamment — le préréglage d'exemple asymétrique est construit ainsi.
Comment obtenir un cercle ou une ellipse parfaite ?
Basculez Unité sur Pourcent et réglez les quatre coins à 50 : sur un élément carré le résultat est un cercle parfait, et sur un élément rectangulaire une ellipse. C'est la technique standard des avatars et des pilules, et l'aperçu la montre avant que vous ne copiez quoi que ce soit.
Pourquoi la sortie liste-t-elle toujours quatre valeurs ?
Le CSS permettrait de condenser des valeurs identiques en raccourci, mais le générateur écrit les quatre coins dans le sens horaire pour que la déclaration reflète exactement les quatre contrôles. Ce que vous avez réglé est ce que vous collez, sans ambiguïté sur le coin que chaque nombre façonne.
Quelles sont les limites ?
Chaque coin accepte 0 à 100 dans l'unité sélectionnée, par pas de 1. Les valeurs hors limites sont surlignées avec VÉRIFIER LES VALEURS, et la copie ou le téléchargement est bloqué jusqu'à correction.
Quelque chose est-il téléversé ou stocké ?
Non. L'aperçu et le CSS généré sont calculés dans cet onglet du navigateur, et aucune valeur générée n'entre dans le stockage, les journaux, les analytics ou le réseau.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer