Kluczowe punkty
- 01Trzy tryby — jednolity, dla każdego rogu i eliptyczny — obejmują wszystko od prostych zaokrąglonych przycisków do organicznych kształtów blob.
- 02Obsługuje jednostki px, %, i rem, każda ze swoim zachowaniem skalowania.
- 03Tryb eliptyczny ujawnia promienie poziome i pionowe dla każdego rogu dla pełnej składni CSS border-radius.
- 04Podgląd na żywo używa rzeczywistej właściwości CSS, więc to, co widzisz, to dokładnie to, co wyświetli Twoja przeglądarka.
Od prostych zaokrąglonych narożników do organicznych kształtów blob
Czterorożna wartość border-radius jest wystarczająco łatwa do wpisania z pamięci — border-radius: 8px. Ale gdy potrzebujesz różnych promieni dla każdego rogu lub chcesz eliptyczną składnię CSS dla organicznych kształtów, skrót szybko staje się niezrozumiały. Pełna forma to top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — osiem wartości w określonej kolejności.
Generator border-radius Handytool pozwala przeciągać suwaki dla każdego rogu w dowolnym trybie i widzieć kształt aktualizujący się na żywo. Przełączaj się między px, %, i rem bez przeliczania, i skopiuj prawidłową skróconą lub pełną deklarację CSS, gdy skończysz.
Jak zaprojektować Border Radius
- 01
Wybierz tryb
Tryb jednolity stosuje jeden promień do wszystkich czterech narożników. Tryb dla każdego rogu kontroluje każdy narożnik niezależnie. Tryb eliptyczny dodaje oddzielny promień poziomy i pionowy dla każdego rogu.
- 02
Wybierz jednostkę
Wybierz px dla rozmiarów bezwzględnych, % dla wartości skalujących się wraz z wymiarami elementu, lub rem dla rozmiarów powiązanych z rozmiarem czcionki głównej.
- 03
Przeciągaj suwaki
Dostosuj wartości promienia i obserwuj aktualizację elementu podglądu na żywo. W trybie dla każdego rogu przeciągaj suwak każdego rogu niezależnie.
- 04
Podgląd kształtu
Pole podglądu stosuje rzeczywistą właściwość CSS border-radius, więc kształt, który widzisz, to kształt, który wyświetli Twoja przeglądarka.
- 05
Skopiuj CSS
Kliknij Kopiuj, aby pobrać deklarację border-radius i wkleić ją do arkusza stylów.
Popularne kształty i kiedy używać każdego trybu
- 01Przycisk pigułka: tryb jednolity %, ustaw na 50% — zawsze pełna pigułka niezależnie od szerokości przycisku
- 02Karta z subtelnym zaokrągleniem: tryb jednolity px, 8–16px — najczęstszy wzór interfejsu
- 03Asymetryczna etykieta lub tag: tryb dla każdego rogu, ostry z jednej strony, zaokrąglony z drugiej
- 04Koło awatara: tryb jednolity %, 50% — skaluje się wraz z kontenerem obrazu
- 05Organiczny kształt blob: tryb eliptyczny z różnymi wartościami X/Y dla każdego rogu
Natychmiastowy podgląd, nic nie jest przesyłane
Generator border-radius jest całkowicie po stronie klienta. Suwaki, przełączniki trybów i zmiany jednostek natychmiast aktualizują podgląd bez żadnej komunikacji z serwerem. Nie ma konta i nie ma limitu szybkości.
Narzędzie działa we wszystkich nowoczesnych przeglądarkach. Właściwość border-radius — w tym eliptyczna składnia X/Y — jest obsługiwana w każdej wersji Safari, Firefox, Edge i Chrome, więc dane wyjściowe są bezpieczne w użyciu bez prefiksów dostawcy lub fallbacków.
FAQ Generatora Border-Radius
Jaka jest różnica między px a % dla border-radius?
Promienie pikseli są bezwzględne — 16px to zawsze 16px. Promienie procentowe są względne do wymiarów elementu, więc 50% tworzy idealne koło na pudełku kwadratowym i elipsę na prostokącie.
Kiedy powinienem używać trybu eliptycznego?
Używaj trybu eliptycznego, gdy chcesz narożnik, który bardziej wybrzusza się na jednej osi — dla poziomej pigułki, kształtu liścia lub organicznego blob. CSS wyraża to jako X-radii / Y-radii w skrócie border-radius.
Dlaczego mój promień procentowy wygląda źle na pudełku niekwadratowym?
Promienie poziome są względne do szerokości elementu; promienie pionowe do jego wysokości. Na szerokim, niskim elemencie narożniki rozciągają się w elipsy zamiast łuków kołowych.
Czy dane wyjściowe działają w każdej przeglądarce?
Tak — border-radius w tym eliptyczna składnia jest obsługiwana w każdej nowoczesnej przeglądarce: wszystkie wersje Safari, Firefox, Edge i Chrome. Nie są potrzebne prefiksy dostawcy.
Jak utworzyć idealne koło za pomocą border-radius?
Ustaw wszystkie narożniki na 50% w trybie procentowym na elemencie kwadratowym. Element musi również mieć równą szerokość i wysokość — użyj aspect-ratio: 1 / 1, jeśli rozmiar jest dynamiczny.