Border Radius Generator

O tym narzędziu

Właściwość border-radius zaokrągla narożniki elementu. Gdy wszystkie cztery wartości są równe, stosuje się skróconą formę z jedną wartością. Różne wartości tworzą asymetryczne kształty — tabletka używa 50% na wszystkich narożnikach, liść naprzemiennie 0% i 50%.

Kliknij dowolny numer narożnika, aby wpisać wartość bezpośrednio, lub przeciągnij powiązany suwak, aby zmienić wszystkie cztery narożniki jednocześnie. Wyłącz Zablokuj wszystkie narożniki, aby kontrolować każdy narożnik niezależnie.

Jak używać

1. Wprowadź wartości w czterech polach narożników (lewy górny, prawy górny, lewy dolny, prawy dolny).
2. Włącz Zablokuj wszystkie narożniki, aby ustawić cztery wartości jednocześnie za pomocą suwaka.
3. Przełączaj się między jednostkami px i % w zależności od potrzeb projektu.
4. Kliknij preset (Tabletka, Liść, Blob itp.), aby natychmiast zastosować predefiniowany kształt.

Przypadki użycia

Projektanci UI używają border-radius do tworzenia przycisków, kart i kształtów avatarów. Programiści dostosowują zaokrąglone narożniki do systemów projektowania marki. Kształt tabletki (50%) jest powszechnie stosowany dla tagów i odznak. Asymetryczne wartości tworzą organiczne kształty liścia lub blob dla elementów dekoracyjnych.

Często zadawane pytania

• Jaka jest różnica między px a %? — px daje stały promień narożnika niezależnie od rozmiaru elementu. % jest względne do szerokości i wysokości elementu — 50% na wszystkich narożnikach tworzy idealne koło (jeśli element jest kwadratem).
• Czy mogę ustawić różne promienie dla każdego narożnika? — Tak. Odznacz Zablokuj wszystkie narożniki i wpisz różne wartości w każdym polu narożnika.
• Co oznacza skrócona forma wyjścia? — Gdy wszystkie cztery narożniki są równe, wyjście jest jedną wartością. Gdy się różnią, kolejność CSS to: lewy górny, prawy górny, prawy dolny, lewy dolny.