Générateur CSS de squircle — carré arrondi
Concevez visuellement vos border-radius CSS : quatre curseurs indépendants par coin en px ou en pourcentage, un raccourci de liaison pour des cercles et des pilules instantanés, ainsi qu’un mode Blob organique avec des formes aléatoires.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de border-radius avec les quatre coins liés à 30 %, un arrondi modéré qui se situe entre un carré vif et un cercle complet. Il ne s’agit pas d’un véritable squircle mathématique (une superellipse), mais c’est ce qu’une seule propriété CSS peut approcher au mieux, et c’est la valeur vers laquelle la plupart des design systems se tournent pour obtenir ce rendu.
Le nom vient des icônes d’apps aux coins arrondis popularisées par iOS : assez de courbe sur chaque coin pour un rendu doux et chaleureux, mais jamais au point que la forme paraisse ronde. Les tuiles d’icônes, les vignettes de cartes et les cadres d’avatars modernes utilisent tous des rayons dans cette plage approximative pour cette raison précise.
Augmentez le curseur lié pour un rendu plus doux et circulaire, ou baissez-le pour un rendu plus net et carré — la ligne CSS se met à jour à chaque modification, prête à être copiée une fois que la courbe vous semble adaptée à votre icône ou carte.