Generator okręgów CSS — promień granicy 50%.
Wizualnie zaprojektuj promień obramowania CSS: cztery niezależne suwaki narożne w pikselach lub procentach, skrót łączący wszystkie rogi do natychmiastowych okręgów i pigułek, a także tryb organicznego obiektu typu blob z losowymi kształtami.
Wynik
Ta strona otwiera generator promieni obramowania z połączonymi wszystkimi czterema narożnikami i ustawionym na 50%, czyli wartość, która zamienia prostokąt w okrąg przy użyciu wyłącznie CSS. Szczerze: na kwadratowym pudełku tworzy to idealne koło, ale na prostokątnym pudełku to samo 50% tworzy elipsę przypominającą stadion, ponieważ każdy róg zaokrągla tylko swoją własną ćwiartkę.
To rozróżnienie ma znaczenie, ponieważ 50% promień obramowania to najpopularniejszy sposób tworzenia okrągłych awatarów, odznak ikon i kropek stanu w CSS — znacznie prostsze niż przycięcie okręgu maską lub narysowanie go w formacie SVG, a ponadto pozostaje wyraźny niezależnie od rozmiaru, ponieważ jest to względna wartość procentowa, a nie stały promień piksela.
Przełącz ramkę na stały kwadratowy rozmiar we własnym CSS, aby utworzyć idealny okrąg, lub celowo pozostaw prostokąt, aby uzyskać kształt pigułki — w obu przypadkach rogi pozostają tutaj połączone, więc pojedynczy suwak synchronizuje wszystkie cztery podczas kopiowania wynikowego CSS.