Générateur de cercles CSS — Carré arrondi
Concevez visuellement le rayon de bordure CSS : quatre curseurs de coin indépendants en px ou en pourcentage, un raccourci de lien dans tous les coins pour les cercles et les pilules instantanés, ainsi qu'un mode blob organique avec des formes aléatoires.
Résultat
Cette page ouvre le générateur de rayon de bordure avec les quatre coins liés à 30 %, un arrondi modéré qui se situe entre un carré pointu et un cercle complet. Ce n'est pas un véritable cercle mathématique (une superellipse), mais c'est ce qui s'en rapproche le plus qu'une seule propriété CSS puisse obtenir, et c'est la valeur que la plupart des systèmes de conception atteignent lorsqu'ils souhaitent obtenir cet aspect.
Le nom vient des icônes d'application carrées arrondies popularisées par iOS : suffisamment de courbes à chaque coin pour se sentir douces et conviviales, mais jamais au point que la forme soit ronde. Les tuiles d’icônes, les vignettes de cartes et les cadres d’avatar modernes s’appuient tous sur des rayons dans cette même plage approximative pour exactement cette raison.
Déplacez le curseur lié vers le haut pour une sensation plus douce et plus circulaire ou vers le bas pour une sensation plus nette et plus carrée - la ligne CSS se met à jour à chaque modification, prête à être copiée une fois que la courbe convient à votre icône ou à votre carte.