Generator Border Radius
Zaokrąglaj rogi za pomocą suwaków, twórz organiczne kształty w trybie eliptycznym i błyskawicznie kopiuj kod CSS.
Każdy róg jest renderowany bezpośrednio w Państwa przeglądarce. Żadne wprowadzane tu dane nie są przesyłane do BroBroGo.
FAQ
Jak działają cztery rogi oraz różnica między px a %?
Cztery suwaki odpowiadają (zgodnie z ruchem wskazówek zegara) rogom: górnemu lewemu, górnemu prawemu, dolnemu prawemu i dolnemu lewemu. W pikselach róg zaokrągla się o stałą wartość; w procentach zaokrąglenie zależy od wymiarów pola — procent poziomy odnosi się do szerokości, a pionowy do wysokości, dlatego 50% zamienia kwadrat w koło.
Do czego służy tryb eliptyczny?
Gdy ta opcja jest wyłączona, każdy róg jest ćwiartką koła o jednym promieniu. Po jej włączeniu każdy róg otrzymuje osobny promień poziomy i pionowy, co pozwala na tworzenie miękkich, organicznych kształtów typu „blob”. Generator automatycznie zapisuje kod w formacie z ukośnikiem dla dwóch wartości i powraca do formy skróconej, gdy rogi znów staną się regularnie zaokrąglone.
Jak stworzyć idealne koło lub kształt pigułki?
Połącz rogi, przełącz jednostkę na procenty i ustaw 50%: kwadrat zmieni się w koło. W przypadku przycisku o kształcie pigułki zachowaj piksele i przeciągnij suwak rogu powyżej połowy wysokości przycisku — boki pozostaną w pełni zaokrąglone przy dowolnej szerokości. Gotowy zestaw „Koło” konfiguruje pierwszy przypadek jednym kliknięciem.