Generator Border Radius

Zaokrąglaj rogi za pomocą suwaków, twórz organiczne kształty w trybie eliptycznym i błyskawicznie kopiuj kod CSS.

Szablony
Rogi
Wszystkie rogi
24px
CSS
Przeciągnij suwaki, aby zaokrąglić rogi.

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.