Générateur de rayon de frontière
Concevez visuellement les rayons des bordures, des coins arrondis aux formes de gouttes.
Comment utiliser Générateur de rayon de frontière
- Ajustez les coins — ensemble pour un arrondi uniforme, individuellement pour les formes.
- Regardez l'aperçu en direct — la personnalité du rayon est impossible à juger à partir des chiffres.
- Essayez le mode blob (différents rayons horizontaux/verticaux) pour les formes de héros organiques.
- Copiez le CSS — et standardisez 2 à 3 valeurs de rayon dans votre conception.
Qu'est-ce que Générateur de rayon de frontière ?
Un générateur de rayon de bordure rend visuel l'arrondi des coins : ajustez le rayon de chaque coin avec un aperçu en direct et copiez le CSS border-radius. L'arrondi uniforme est trivial (border-radius: 8px) ; le générateur gagne sa place grâce au contrôle par coin (modèles 8px 24px 8px 24px) et à la syntaxe slash exotique — 30 % 70 % 70 % 30 % / 30 % 30 % 70 % 70% – où les rayons horizontaux et verticaux diffèrent par coin, produisant les formes organiques "blob" décorant l'atterrissage moderne pages.
Radius est une molette de tonalité : 0 lit technique, 4 à 8 px professionnel, 12 à 24 px convivial, 9 999 px en forme de pilule et des blobs asymétriques ludiques — peu de propriétés CSS définissent la personnalité d'un design aussi directement.
À propos de Générateur de rayon de frontière
Faites glisser les contrôles par coin, regardez la forme mise à jour en direct et copiez le CSS — du subtil 12 px d'une carte à un blob complet de huit valeurs.
Les modèles pratiques : des rayons cohérents dans un système de conception (choisissez 2 à 3 valeurs — disons entrées 6 px, cartes 12 px, modaux 24 px — et réutilisez-les ; rayons aléatoires lus comme bâclés) ; le bouton pilule (rayon ≥ moitié de la hauteur, classiquement 9999px) ; des cercles (50 % sur un élément carré — la recette de l'avatar) ; formes de bulles et d'onglets (trois coins ronds, un carré) ; et les blobs de héros via la syntaxe slash, souvent animés entre deux jeux de rayons pour un arrière-plan de morphing doux.
Une remarque sur la géométrie : les éléments arrondis imbriqués semblent incorrects avec des rayons égaux – le rayon de l'élément intérieur doit être celui de l'extérieur moins le remplissage entre eux (16 px extérieur, rembourrage de 8 px → 8 px intérieur), sinon les coins se battent visiblement.