Narzędzia

Generator zaokrągleń CSS (border-radius) – z podglądem

Ustaw zaokrąglenie każdego rogu (border-radius) suwakami i skopiuj gotowy CSS. Podgląd elementu zmienia się na żywo.

Aktualizacja: 20.07.2026 • Opracował: DobryKalkulator.pl

Jak liczymy ↓ FAQ

Spis treści

Lewy górny 24px Prawy górny 24px Prawy dolny 24px Lewy dolny 24px

🔒 Generujesz kod lokalnie w przeglądarce. Skopiuj gotowy CSS i wklej do swojego arkusza stylów.

Jak działa kalkulator

Ustaw zaokrąglenie każdego z czterech rogów osobnym suwakiem. Podgląd zmienia się na bieżąco, a kod CSS skopiujesz jednym kliknięciem.

Jak liczymy (metodologia i wzory)

Narzędzie generuje właściwość border-radius z czterema wartościami (lewy górny, prawy górny, prawy dolny, lewy dolny) i stosuje ją do elementu podglądu.

FAQ

Czy muszę coś instalować?

Nie. Narzędzie działa w przeglądarce – ustaw suwaki i skopiuj gotowy kod CSS.

Czy podgląd odpowiada realnemu wyglądowi?

Tak – podgląd stosuje dokładnie ten sam CSS, który kopiujesz.

Założenia i ograniczenia

Prywatność: kod generowany jest lokalnie w przeglądarce.
Skopiuj CSS i wklej do własnego arkusza stylów.

Umieść ten kalkulator na swojej stronie

Skopiuj kod i wklej go w swoim artykule, kalkulator zadziała u Ciebie, a pod nim pojawi się link do źródła. Za darmo, bez rejestracji.

Motyw:

<!– Kalkulator Generator zaokrągleń CSS (border-radius) – z podglądem – dobrykalkulator.pl –>
<div style="max-width:680px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.10);background:#ffffff">
  <iframe id="dk-generator-zaokraglen-css" src="https://dobrykalkulator.pl/embed/generator-zaokraglen-css/" title="Generator zaokrągleń CSS (border-radius) – z podglądem" loading="lazy" style="width:100%;height:720px;border:0;display:block"></iframe>
  <p style="margin:0;padding:10px 14px;background:#ffffff;border-top:1px solid #edf0f4;font:13px system-ui,sans-serif;color:#5a6577">Źródło: <a href="https://dobrykalkulator.pl/generator-zaokraglen-css/" target="_blank" rel="noopener" style="color:#2f55d4;font-weight:600;text-decoration:none">Generator zaokrągleń CSS (border-radius)</a></p>
</div>
<script>(function(){var f=document.getElementById("dk-generator-zaokraglen-css");window.addEventListener("message",function(e){if(f&&e.source===f.contentWindow&&e.data&&e.data.dkEmbed&&e.data.height)f.style.height=e.data.height+"px";});})();</script>

Podgląd widgetu ↗