Generatore di cerchi CSS: raggio del bordo 50%.
Progetta visivamente il raggio del bordo CSS: quattro cursori angolari indipendenti in px o percentuale, una scorciatoia collega tutti gli angoli per cerchi e pillole istantanei, oltre a una modalità blob organica con forme casuali.
Risultato
Questa pagina apre il generatore del raggio del bordo con tutti e quattro gli angoli collegati e impostati al 50%, il valore che trasforma un riquadro in un cerchio utilizzando esclusivamente CSS. Onestamente: su una scatola quadrata questo forma un cerchio perfetto, ma su una scatola rettangolare lo stesso 50% produce invece un'ellisse tipo stadio, poiché ogni angolo arrotonda sempre e solo il proprio quarto.
Questa distinzione è importante perché il raggio del bordo del 50% è il modo più comune per creare avatar circolari, badge di icone e punti di stato nei CSS: molto più semplice che ritagliare un cerchio con una maschera o disegnarne uno in SVG, e rimane nitido a qualsiasi dimensione poiché è una percentuale relativa, non un raggio di pixel fisso.
Cambia la casella in una dimensione quadrata fissa nel tuo CSS per bloccare il cerchio perfetto, o lasciala rettangolare apposta per una forma simile a una pillola: in ogni caso, gli angoli rimangono collegati qui in modo che un singolo cursore li mantenga tutti e quattro sincronizzati mentre copi il CSS risultante.