Générateur de cercle CSS — Rayon de bordure de 50 %
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 et définis à 50 %, la valeur qui transforme une boîte en cercle en utilisant uniquement du CSS. Honnêtement : sur une boîte carrée, cela forme un cercle parfait, mais sur une boîte rectangulaire, les mêmes 50 % produisent à la place une ellipse en forme de stade, puisque chaque coin n'arrondit que son propre quart.
Cette distinction est importante car un rayon de bordure de 50 % est le moyen le plus courant de créer des avatars circulaires, des badges d'icônes et des points d'état en CSS - bien plus simple que de découper un cercle avec un masque ou d'en dessiner un en SVG, et il reste net quelle que soit la taille puisqu'il s'agit d'un pourcentage relatif et non d'un rayon de pixel fixe.
Basculez la boîte vers une taille carrée fixe dans votre propre CSS pour verrouiller le cercle parfait, ou laissez-la volontairement rectangulaire pour une forme semblable à une pilule - dans tous les cas, les coins restent liés ici afin qu'un seul curseur maintienne les quatre synchronisés pendant que vous copiez le CSS résultant.