Zaokrąglij rogi. Każdy inaczej, jeśli chcesz.
Round the corners. Each one differently if you like.
Ustaw promień każdego rogu z osobna albo powiąż je wszystkie jednym suwakiem i skopiuj gotową
wartość border-radius. Bez instalacji, bez rejestracji — wszystko w przeglądarce.
Set each corner's radius independently, or link them all to one slider, and copy the finished
border-radius value. No install, no sign-up — it all runs in your browser.
border-radius: 24px 24px 24px 24px;
Wybierz tryb
Pick a mode
Zostaw rogi powiązane dla jednolitego zaokrąglenia albo odznacz opcję, żeby ustawić każdy róg osobno.
Keep corners linked for a uniform rounding, or uncheck the option to set each corner independently.
Dostosuj promienie
Adjust the radii
Przesuwaj suwaki, aż podgląd nabierze kształtu, który pasuje do Twojego projektu — od karty po kroplę.
Move the sliders until the preview takes the shape that fits your design — from a card to a blob.
Skopiuj CSS
Copy the CSS
Kliknij „Kopiuj” i wklej gotową wartość border-radius do swojego arkusza stylów.
Click "Copy" and paste the ready border-radius value into your stylesheet.
- Karty produktowe i kontenery treści o miękkim wyglądzie.
- Awatary i miniatury z asymetrycznym zaokrągleniem ("blob shape").
- Przyciski i pola formularzy w spójnym systemie designu.
- Product cards and content containers with a soft look.
- Avatars and thumbnails with an asymmetric "blob shape".
- Buttons and form fields in a consistent design system.
Czym jest ten generator? To wizualne narzędzie do budowania
wartości CSS border-radius — łącznie z asymetrycznymi kształtami, które trudno
wyobrazić sobie bez podglądu.
What is this tool? A visual way to build a CSS
border-radius value — including asymmetric shapes that are hard to picture without a preview.
Co robi border-radius w CSS?
What does border-radius do in CSS?
Właściwość border-radius zaokrągla rogi elementu. Można podać jedną
wartość dla wszystkich rogów albo cztery osobne wartości dla każdego rogu z osobna.
The border-radius property rounds an element's corners. You can give
it one value for all corners, or four separate values for each corner individually.
Jak zrobić kształt "blob" albo kroplę?
How do I make a "blob" or teardrop shape?
Odznacz tryb powiązany i ustaw każdy róg na inną wartość — im większa różnica między rogami, tym bardziej organiczny, asymetryczny kształt uzyskasz.
Uncheck linked mode and set each corner to a different value — the bigger the difference between corners, the more organic and asymmetric the shape becomes.
Czy mogę użyć procentów zamiast pikseli?
Can I use percentages instead of pixels?
Tak, w praktyce w CSS border-radius przyjmuje też wartości procentowe
(np. 50% tworzy koło z kwadratu) — ten generator pracuje na pikselach, ale wynik możesz łatwo przeliczyć.
Yes, in practice CSS border-radius also accepts percentage values
(e.g. 50% turns a square into a circle) — this generator works in pixels, but the result is easy to convert.
Co się stanie, jeśli promień jest większy niż połowa boku?
What happens if the radius exceeds half the side length?
Przeglądarka ogranicza promień do połowy krótszego boku elementu, więc kwadrat z bardzo dużym promieniem po prostu zamieni się w koło.
The browser caps the radius at half the element's shorter side, so a square with a very large radius simply becomes a circle.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce — ustawienia i skopiowany CSS zostają lokalnie.
No. The generator runs entirely in your browser — your settings and copied CSS stay local.
Czym jest CSS Border Radius Generator?
Zaokrąglone rogi to jeden z najprostszych sposobów, żeby interfejs wyglądał miękciej i bardziej przyjaźnie. Problem pojawia się, gdy chcesz uzyskać coś więcej niż jednolite zaokrąglenie — na przykład kształt zbliżony do kropli albo karty z jednym ostrym rogiem. Wtedy trzeba żonglować czterema liczbami naraz, co bez podglądu na żywo jest czystym zgadywaniem.
Jak działa wartość border-radius
Podana pojedynczo wartość zaokrągla wszystkie cztery rogi jednakowo. Podane osobno cztery wartości opisują kolejno górny lewy, górny prawy, dolny prawy i dolny lewy róg — dokładnie w tej kolejności zgodnie ze specyfikacją CSS. Każdy róg może mieć też dwie różne wartości (poziomą i pionową), co pozwala tworzyć eliptyczne, a nie tylko kołowe zaokrąglenia.
Kiedy warto odejść od jednolitego zaokrąglenia
- Karty z jednym wyróżnionym, ostrym rogiem, np. przy etykiecie lub znaczniku.
- Organiczne kształty tła ("blob") jako dekoracyjny element sekcji.
- Elementy nawiązujące wizualnie do zakładki albo karteczki papieru.
Praktyczne wskazówki
Zbyt duży promień na małym elemencie potrafi wyglądać niezamierzenie — sprawdzaj podgląd przy realnych proporcjach komponentu, nie tylko w oderwanym kwadracie. Zachowuj spójność: jeśli karty w projekcie mają promień 12px, przyciski wewnątrz nich zwykle wyglądają lepiej z promieniem nieco mniejszym, np. 8px, żeby zachować wizualną hierarchię.
Wdrożenie w produkcji
Skopiowaną wartość możesz zapisać jako zmienną, np. --radius-card,
--radius-button, żeby całe zaokrąglenie w projekcie pochodziło z jednego źródła
i dało się je zmienić globalnie jednym miejscem w kodzie.
What is a CSS Border Radius Generator?
Rounded corners are one of the simplest ways to make an interface feel softer and friendlier. The trouble starts when you want more than a uniform rounding — say, a teardrop-like shape or a card with one sharp corner. Then you're juggling four numbers at once, which is pure guesswork without a live preview.
How the border-radius value works
A single value rounds all four corners equally. Four separate values describe, in order, the top-left, top-right, bottom-right, and bottom-left corner — exactly in that order per the CSS spec. Each corner can also take two different values (horizontal and vertical), which lets you create elliptical, not just circular, rounding.
When to break from uniform rounding
- Cards with one sharp, highlighted corner, e.g. for a label or tag.
- Organic "blob" background shapes as a decorative section element.
- Elements meant to visually reference a tab or a torn piece of paper.
Practical tips
Too large a radius on a small element can look unintentional — check the preview at the component's real proportions, not just an isolated square. Keep it consistent: if cards in the project use a 12px radius, buttons inside them usually look better with a slightly smaller one, like 8px, to preserve visual hierarchy.
Using it in production
Save the copied value as a variable, such as --radius-card or
--radius-button, so all rounding in the project comes from one source and can be
changed globally from a single place in the code.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Gradienty, cienie, przyciski i efekty szkła — wszystko w jednym miejscu, bez instalacji.
Gradients, shadows, buttons, and glass effects — all in one place, no install needed.