Générateur de cercle CSS — border-radius à 50 %
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 et réglés à 50 %, la valeur qui transforme une boîte en cercle en utilisant uniquement CSS. Soyons honnêtes : sur une boîte carrée, on obtient un cercle parfait, mais sur une boîte rectangulaire, les mêmes 50 % produisent une ellipse en forme de stade, car chaque coin n’arrondit que son propre quart.
Cette distinction est importante car un border-radius de 50 % est la façon la plus courante de créer des avatars circulaires, des badges d’icônes et des points de statut en CSS — bien plus simple que de découper un cercle avec un masque ou d’en dessiner un en SVG, et le résultat reste net à toutes les tailles puisque c’est un pourcentage relatif, pas un rayon en pixels fixes.
Appliquez une taille carrée fixe à la boîte dans votre propre CSS pour verrouiller le cercle parfait, ou laissez-la rectangulaire intentionnellement pour une forme de pilule — dans les deux cas, les coins restent liés ici, de sorte qu’un seul curseur garde les quatre en synchronisation pendant que vous copiez le CSS obtenu.