Zasada działania właściwości CSS border-radius
Właściwość border-radius w języku CSS odpowiada za stopień zaokrąglenia rogów obramowania elementów na stronie internetowej. Narzędzie Generator Border Radius umożliwia precyzyjną regulację tego parametru za pomocą suwaków, pozwalając na modyfikację każdego rogu osobno lub wszystkich jednocześnie. Użytkownik ma do dyspozycji jednostki pikseli (px) oraz procentów (%).
Dodatkowo narzędzie oferuje tryb eliptyczny, który pozwala na uzyskanie bardziej miękkich, organicznych kształtów poprzez zdefiniowanie osobnych promieni poziomych i pionowych dla każdego z rogów. Wygenerowany kod CSS jest tworzony natychmiastowo i wyświetla się bezpośrednio pod podglądem elementu.
Jednostki pikseli a wartości procentowe
Wybór odpowiedniej jednostki w selektorze jednostek Jednostka ma kluczowe znaczenie dla zachowania kształtu elementu podczas zmiany jego rozmiarów:
- Piksele (px): Zaokrąglenie rogu następuje o stałą, określoną wartość numeryczną. Niezależnie od tego, jak duży lub mały jest element, promień zaokrąglenia pozostaje niezmienny.
- Procenty (%): Zaokrąglenie rogu następuje w stosunku do wymiarów elementu. Wartość procentowa w poziomie odnosi się do całkowitej szerokości elementu, natomiast wartość procentowa w pionie odnosi się do jego wysokości. Rozwiązanie to jest powszechnie stosowane w projektowaniu responsywnym, gdzie wymiary elementów ulegają zmianie w zależności od wielkości ekranu.
Tworzenie podstawowych i zaawansowanych kształtów
Za pomocą suwaków, których zakres wynosi od 0 do 100, można uzyskać różnorodne formy geometryczne. Domyślna wartość początkowa suwaka wynosi 24, co generuje kod border-radius: 24px;.
Idealne koło
Aby przekształcić kwadratowy element w idealne koło, należy połączyć wszystkie rogi, przełączyć jednostkę na procenty (%) i ustawić wartość suwaka na 50%. Taki sam efekt można uzyskać natychmiastowo, klikając szablon oznaczony jako "Koło".
Kształt pigułki (pill-shaped button)
W celu zaprojektowania podłużnego przycisku o zaokrąglonych bokach należy zachować jednostkę pikseli (px) i przeciągnąć suwak regulacji rogów powyżej połowy wysokości projektowanego elementu. Dzięki temu boki przycisku pozostaną w pełni zaokrąglone bez względu na jego ostateczną szerokość.
Kształty organiczne (Blob) i asymetryczne
Włączenie trybu eliptycznego pozwala na zerwanie z klasycznym, kołowym zaokrągleniem, w którym każdy róg jest ćwiartką okręgu o jednym promieniu. W trybie eliptycznym każdy róg otrzymuje niezależny promień poziomy oraz pionowy. Umożliwia to tworzenie nieregularnych, naturalnych kształtów, takich jak krople czy liście.
Obsługa interfejsu i dostępne szablony
Interfejs narzędzia został podzielony na sekcje ułatwiające szybką konfigurację parametrów:
- Suwaki (Sliders): Gdy opcja "Połącz wszystkie rogi" jest aktywna, pojedynczy suwak "Wszystkie rogi" kontroluje cały element. Po jej wyłączeniu użytkownik otrzymuje cztery niezależne suwaki mapowane zgodnie z ruchem wskazówek zegara: "Górny lewy", "Górny prawy", "Dolny prawy" oraz "Dolny lewy". W trybie eliptycznym każdy z tych rogów zostaje dodatkowo rozbity na suwaki "Poziomo" i "Pionowo".
- Szablony: Szybkie przyciski pozwalające na natychmiastowe nałożenie określonych stylów:
- "Ostry" – zeruje wszystkie zaokrąglenia.
- "Zaokrąglony" – nadaje standardowe, delikatne zaokrąglenie.
- "Koło" – ustawia wszystkie rogi na wartość 50%.
- "Blob (organiczny)" – tworzy nieregularny, płynny kształt.
- "Liść" – asymetrycznie zaokrągla przeciwległe rogi.
Generowanie kodu CSS i składnia
Narzędzie automatycznie formatuje kod CSS w zależności od wybranych ustawień. W przypadku klasycznego zaokrąglenia stosowana jest skrócona forma zapisu.
W momencie aktywacji trybu eliptycznego, generator przechodzi na zapis dwuwartościowy z użyciem ukośnika (slash), gdzie wartości przed ukośnikiem określają promienie poziome, a wartości po ukośniku promienie pionowe. Jeśli użytkownik powróci do regularnych, równych zaokrągleń, generator automatycznie przywraca uproszczoną formę zapisu kodu. Gotowy kod można skopiować do schowka jednym kliknięciem za pomocą przycisku "Kopiuj CSS".
Prywatność i przetwarzanie danych
Każdy róg jest renderowany bezpośrednio w Państwa przeglądarce. Żadne wprowadzane tu dane nie są przesyłane do BroBroGo. Cały proces generowania kodu oraz wizualizacji kształtu odbywa się lokalnie na urządzeniu użytkownika.
Często zadawane pytania (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.