Użyj border-radius: 50% na elemencie o równej szerokości i wysokości. Na prostokącie 50% daje elipsę, a duża wartość w pikselach — pigułkę o prostych bokach.

Co oznacza ukośnik w border-radius?

Oddziela promienie poziome od pionowych, dzięki czemu każdy narożnik może być ćwiartką elipsy zamiast ćwiartki koła. Organiczne kształty blob korzystają z tego zapisu.

Generator zaokrągleń narożników

Zaokrąglaj każdy narożnik, przełączaj się na promienie eliptyczne i przeciągaj uchwyty krawędzi, aby modelować kształty blob. Skopiuj CSS border-radius lub Tailwind.

Podgląd na żywo

Przełącz na %, aby modelować kształt uchwytami krawędzi.

border-radius: 24px;

Wszystko pozostaje w Twojej przeglądarce.

Źródła

MDN — border-radius

Aktualizacja strony: 2026-10-25

Podgląd na żywo

Instrukcja i przykład

Powiązane narzędzia

Źródła