CodeKitHubCzym jest to narzędzie?
border-radius to właściwość CSS, która zaokrągla rogi elementu. Wpisywana ręcznie przyjmuje cztery wartości w ustalonej kolejności — lewy górny, prawy górny, prawy dolny, lewy dolny — co łatwo pomylić, zwłaszcza gdy rogi mają różne promienie.
To narzędzie eliminuje konieczność zgadywania: przesuń suwak, obserwuj, jak zaokrągla się róg w podglądzie na żywo, i odczytaj dokładny kod CSS z wygenerowanego pola kodu. Pojedynczy przełącznik pozwala wybierać między jednolitym promieniem (wszystkie cztery rogi mają ten sam promień – najczęstszy przypadek) a czterema niezależnymi suwakami, które pozwalają uzyskać naturalne, asymetryczne kształty.
Dlaczego warto go używać?
- Podgląd na żywo aktualizuje się natychmiastowo podczas przeciągania — nie trzeba edytować kodu CSS ani odświeżać strony, aby zobaczyć efekt.
- Blokada jednym kliknięciem dla typowego przypadku „tego samego promienia we wszystkich narożnikach”; odblokowanie dla przycisków w kształcie pigułek, dymków i kształtów w stylu „blob”.
- Wyświetla skróconą formę z jedną wartością, gdy wszystkie narożniki są zgodne, lub pełną formę z czterema wartościami, gdy nie są — w obu przypadkach gotową do skopiowania i wklejenia.
- Działa całkowicie w przeglądarce. Żadne wprowadzone dane nie są nigdzie przesyłane.
- Bezpłatne, bez rejestracji, działa na urządzeniach mobilnych.
Jak używać
- Pozostaw zaznaczone pole „Zablokuj wszystkie rogi” i przeciągnij dowolny suwak, aby ustawić jeden jednolity promień dla całego prostokąta.
- Odznacz opcję blokady, aby móc niezależnie regulować każdy róg — przydatne w przypadku kart w kształcie tabletek, łezek i kart asymetrycznych.
- Obserwuj, jak okienko podglądu aktualizuje się na bieżąco w miarę przesuwania poszczególnych suwaków.
- Skopiuj wygenerowany kod CSS z pola kodu i wklej go do swojego arkusza stylów.
Przykład
Wejście
Top-left: 40px, Top-right: 8px, Bottom-right: 40px, Bottom-left: 8pxWynik
border-radius: 40px 8px 40px 8px;Takie niedopasowane przeciwległe rogi tworzą sylwetkę liścia lub płatka — jest to efekt często spotykany w projektowaniu kartek i plakietek.
px czy % — której jednostki powinienem użyć?
Generator ten generuje wartości pikselowe, co stanowi właściwe ustawienie domyślne w przypadku większości elementów interfejsu użytkownika: przycisków, kart i pól wprowadzania danych, w których pożądany jest stały, przewidywalny promień zaokrąglenia narożników niezależnie od rozmiaru elementu.
Wartości procentowe działają inaczej — odnoszą się do szerokości i wysokości samego elementu, więc promień 50% w przypadku elementu kwadratowego tworzy idealne koło, a w przypadku elementu niebędącego kwadratem — elipsę. Jeśli chcesz uzyskać ten efekt (awatary, kształty typu „blob”, które skalują się wraz z kontenerem), weź wygenerowany kod CSS i ręcznie zamień wartości w pikselach na wartości procentowe — na przykład `border-radius: 50%` zamieni dowolny kwadratowy element w okrąg.
Typowe wzory promienia krawędzi
- Karta z zaokrąglonymi narożnikami: wszystkie narożniki są jednakowe, około 8–16 pikseli dla elementów interfejsu użytkownika.
- Przycisk typu „pill”: ustaw promień na połowę wysokości elementu (lub po prostu użyj wartości 9999px, co spowoduje, że przycisk będzie miał kształt pełnego „pilla” niezależnie od wysokości).
- Avatar w kształcie koła: właściwość `border-radius: 50%` zastosowana do elementu kwadratowego (o równej szerokości i wysokości).
- Dymek: trzy zaokrąglone rogi, jeden ostry — ustaw trzy suwaki na wartość „wysoka”, a jeden na 0.
- Kształt liścia / płatka: przeciwległe rogi są takie same, a sąsiednie rogi różne — np. lewy górny i prawy dolny są duże, a prawy górny i lewy dolny są małe.
Połączenie z cieniem
Zaokrąglone rogi rzadko występują samodzielnie — karty i przyciski zazwyczaj wymagają również niewielkiego cienia, aby nadać im wrażenie głębi. Skorzystaj z narzędzia „Box Shadow Generator”, aby ustawić cień, a następnie zastosuj oba wygenerowane fragmenty kodu CSS do tego samego elementu.
Najczęściej zadawane pytania
Jaka jest różnica między właściwością `border-radius` a kolejnością narożników?
Skrót CSS zawsze obejmuje kolejno: lewy górny róg, prawy górny róg, prawy dolny róg i lewy dolny róg, zgodnie z ruchem wskazówek zegara, zaczynając od lewego górnego rogu. Cztery suwaki tego narzędzia są odpowiednio oznaczone, więc nie musisz samodzielnie zapamiętywać tej kolejności.
Czy mogę użyć różnych jednostek w każdym rogu?
Tak, w prawdziwym CSS można łączyć jednostki px, %, em i rem w różnych elementach, choć w praktyce zdarza się to rzadko. To narzędzie generuje jednolite wartości w px dla uproszczenia — jeśli potrzebujesz mieszanych jednostek, zamień dowolną wartość na % lub inną jednostkę bezpośrednio w arkuszu stylów.
Dlaczego właściwość `border-radius: 50%` czasami tworzy owal zamiast koła?
Ponieważ wartości procentowe odnoszą się niezależnie do każdej z osi — promień poziomy stanowi procent szerokości elementu, a promień pionowy — procent jego wysokości. W przypadku elementu kwadratowego (o równej szerokości i wysokości) powstaje idealne koło; w przypadku prostokąta powstaje elipsa.
Czy właściwość `border-radius` działa również w przypadku obrazów tła i obramowań?
Tak — właściwość `border-radius` przycina tło elementu, obramowanie oraz (w nowoczesnych przeglądarkach) jego cień (`box-shadow`) do zaokrąglonego kształtu. Nie przycina ona jednak treści elementów potomnych, które wykraczają poza granice, chyba że dla elementu nadrzędnego ustawiono również właściwość `overflow: hidden`.
Czy istnieje ograniczenie dotyczące maksymalnej wielkości promienia?
Nie ma sztywnego ograniczenia — jeśli promień przekroczy połowę szerokości lub wysokości elementu, przeglądarki dostosowują go tak, aby dwie krzywe po tej stronie stykały się dokładnie w środku, dzięki czemu kwadrat zamienia się w idealne koło lub kształt pigułki.