Generator zaokrągleń
Generator CSS border-radius ustawia zaokrąglenie każdego rogu elementu w procentach za pomocą osobnych suwaków lub jednego suwaka All Corners, oferuje szablony, takie jak koło, liść i blob, i kopiuje CSS.
O tym narzędziu
Generator CSS border-radius ustawia zaokrąglenie każdego rogu elementu w procentach za pomocą osobnych suwaków lub jednego suwaka All Corners, oferuje szablony, takie jak koło, liść i blob, i kopiuje CSS.
Jak używać
- Przeciągaj suwaki dla każdego rogu albo użyj All Corners.
- Wypróbuj szablon, np. Circle, Leaf lub Blob.
- W razie potrzeby zmień rozmiar podglądu.
- Kliknij Copy CSS.
Warto wiedzieć
- border-radius przyjmuje do czterech wartości w kolejności: lewy górny, prawy górny, prawy dolny, lewy dolny.
- border-radius: 50% na kwadratowym elemencie tworzy koło.
- Promienie w procentach skalują się z rozmiarem elementu; promienie w pikselach pozostają stałe.
- Nierówne promienie w przeciwległych rogach tworzą kształty liścia i bloba bez żadnego SVG.
- border-radius jest obsługiwany w każdej aktualnej przeglądarce bez prefiksów.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Jak zrobić zaokrąglone rogi w CSS?
Ustaw border-radius, np. border-radius: 12px; dla wszystkich rogów albo cztery wartości dla poszczególnych rogów.
Jak zrobić koło w CSS?
Nadaj elementowi równą szerokość i wysokość oraz border-radius: 50%.
W jakiej kolejności są cztery wartości border-radius?
Lewy górny, prawy górny, prawy dolny, lewy dolny — zgodnie z ruchem wskazówek zegara od lewego górnego rogu.
border-radius w px czy w %?
Używaj px dla stałych rozmiarów zaokrągleń w przyciskach i kartach, a % dla kształtów, które skalują się z elementem, takich jak koła i bloby.