Que produit exactement le mode Blob du Générateur de CSS Border Radius ?

Il produit la syntaxe elliptique border-radius à 8 valeurs — quatre pourcentages horizontaux, une barre oblique, puis quatre pourcentages verticaux, une paire par coin — l'astuce standard pour des formes organiques à l'aspect dessiné à la main en CSS.

Le Générateur de CSS Border Radius peut-il produire du pourcentage ou du rem plutôt que des pixels ?

Oui. Les modes Simple et Par coin permettent de changer l'unité entre px, % et rem, et l'aperçu en direct ainsi que le CSS généré se mettent à jour immédiatement en conséquence.

Pourquoi le mode Par coin produit-il parfois une seule valeur au lieu de quatre ?

Quand les quatre coins finissent par être égaux, l'outil réduit automatiquement le border-radius à la forme abrégée à valeur unique — c'est du CSS valide et équivalent qui garde votre feuille de style plus propre.

À quoi sert le bouton Aléatoire en mode Blob ?

Il remplit les huit pourcentages du blob avec de nouvelles valeurs aléatoires en un clic, pour explorer rapidement des variations de formes organiques au lieu de saisir chaque coin à la main.

Le CSS border-radius généré est-il pris en charge par tous les navigateurs modernes ?

Oui. La forme abrégée standard et la syntaxe elliptique de blob à 8 valeurs font toutes deux partie de la spécification CSS Backgrounds and Borders et fonctionnent dans tous les navigateurs majeurs actuels.

Générateur de CSS Border Radius en ligne

Créez du border-radius CSS simple, par coin ou en forme de blob avec un aperçu en direct. Tout s'exécute dans votre navigateur.

Le Générateur de CSS Border Radius fonctionne entièrement dans votre navigateur. Les valeurs que vous saisissez et le CSS que vous générez ne quittent jamais votre appareil et ne sont pas envoyés à ArrayKit.

Ouvrir le Générateur de Box Shadow

À propos de Générateur de Border Radius

Le Générateur de CSS Border Radius crée une déclaration border-radius que vous pouvez coller directement dans votre feuille de style, avec un aperçu en direct qui se met à jour au fur et à mesure de vos réglages. Basculez entre le mode Simple pour un rayon unique sur les quatre coins, le mode Par coin pour arrondir chaque coin indépendamment, et le mode Blob pour la forme elliptique à huit valeurs que les designers utilisent pour simuler une forme organique, dessinée à la main. Choisissez px, % ou rem, déplacez les valeurs, ou cliquez sur Aléatoire en mode Blob pour explorer des formes que vous n'auriez pas tapées à la main. Utile pour les boutons, les cartes, les avatars, les blobs de héros et tout composant où les coins arrondis doivent être exactement justes avant de valider le CSS. Conçu pour les développeurs front-end et les designers qui veulent un retour visuel instantané. Tout s'exécute localement dans votre navigateur — aucun style ni balisage n'est envoyé où que ce soit.

Fonctionnalités

Le mode Simple arrondit les quatre coins avec une seule valeur et un curseur
Le mode Par coin définit indépendamment haut-gauche, haut-droit, bas-droit et bas-gauche
Le mode Blob génère le border-radius elliptique à 8 valeurs pour des formes organiques
Bouton Aléatoire en un clic dans le mode Blob pour explorer rapidement des formes
Basculez entre les unités px, % et rem pour les rayons simple et par coin
L'aperçu carré en direct se met à jour instantanément à chaque changement
Déclaration CSS prête à copier en un clic
Fonctionne entièrement dans votre navigateur, sans jamais envoyer de CSS où que ce soit

Comment utiliser Générateur de Border Radius

Choisissez le mode Simple, Par coin ou Blob
Ajustez le curseur, les champs numériques ou les pourcentages du blob
Observez l'aperçu en direct se mettre à jour en temps réel
Copiez la déclaration border-radius générée

Exemple

Entrée

all corners 12px

Sortie

border-radius: 12px;

Quatre coins égaux se réduisent à une seule valeur de border-radius.

Erreurs courantes et dépannage

La forme du blob ressemble à un rectangle arrondi plutôt qu'à une forme organique. — Vérifiez que les pourcentages horizontal et vertical diffèrent pour chaque coin — des valeurs H et V identiques sur tous les coins ne produisent qu'une forme arrondie simple.
Le CSS par coin revient de manière inattendue à une seule valeur. — C'est normal : quand les quatre coins correspondent, le Générateur de CSS Border Radius émet la forme abrégée à valeur unique plutôt que de répéter quatre fois le même nombre.
Un rayon en pourcentage a un rendu différent sur un élément non carré. — Le border-radius en pourcentage est relatif à la largeur et à la hauteur propres de l'élément, donc la même valeur en pourcentage se rend différemment sur un rectangle large que sur un carré — testez sur le ratio réel de votre élément.
Le coin arrondi disparaît sur un élément très petit. — Le border-radius est plafonné à la moitié du côté le plus court de l'élément, donc un grand rayon en px sur une petite boîte se rend simplement en pilule ou en cercle complet au lieu de déborder.

Foire aux questions

Que produit exactement le mode Blob du Générateur de CSS Border Radius ?: Il produit la syntaxe elliptique border-radius à 8 valeurs — quatre pourcentages horizontaux, une barre oblique, puis quatre pourcentages verticaux, une paire par coin — l'astuce standard pour des formes organiques à l'aspect dessiné à la main en CSS.
Le Générateur de CSS Border Radius peut-il produire du pourcentage ou du rem plutôt que des pixels ?: Oui. Les modes Simple et Par coin permettent de changer l'unité entre px, % et rem, et l'aperçu en direct ainsi que le CSS généré se mettent à jour immédiatement en conséquence.
Pourquoi le mode Par coin produit-il parfois une seule valeur au lieu de quatre ?: Quand les quatre coins finissent par être égaux, l'outil réduit automatiquement le border-radius à la forme abrégée à valeur unique — c'est du CSS valide et équivalent qui garde votre feuille de style plus propre.
Le Générateur de CSS Border Radius envoie-t-il mon design ou mon CSS quelque part ?: Non. Chaque calcul et l'aperçu en direct s'exécutent localement dans votre navigateur. Les valeurs que vous saisissez et le CSS généré ne quittent jamais votre appareil.
À quoi sert le bouton Aléatoire en mode Blob ?: Il remplit les huit pourcentages du blob avec de nouvelles valeurs aléatoires en un clic, pour explorer rapidement des variations de formes organiques au lieu de saisir chaque coin à la main.
Le CSS border-radius généré est-il pris en charge par tous les navigateurs modernes ?: Oui. La forme abrégée standard et la syntaxe elliptique de blob à 8 valeurs font toutes deux partie de la spécification CSS Backgrounds and Borders et fonctionnent dans tous les navigateurs majeurs actuels.

Outils associés

Générateur de Box Shadow CSS — Créez des ombres CSS en couches avec aperçu en direct
Générateur de Dégradé CSS — Créez des dégradés linéaires, radiaux et coniques avec des points de couleur en direct.
Calculateur CSS clamp — Transforme une taille min/max et deux largeurs de fenêtre en une valeur clamp() fluide, localement.
Générateur CSS Grid — Construit une grille CSS visuellement et copie le grid-template avec les placements, dans votre navigateur.
Générateur cubic-bezier — Façonne une courbe d’accélération CSS cubic-bezier() en faisant glisser deux points, avec aperçu en direct.
Convertisseur d’unités CSS — Convertissez px, rem, em, pt et % en direct selon une taille racine.