Zaokrąglenia i obramowania (border-radius)

Jednym z najbardziej charakterystycznych elementów nowoczesnego designu są zaokrąglone rogi.
Dzięki nim interfejs wygląda „miękko”, bardziej przyjaźnie i lżej. CSS daje nam bardzo prostą właściwość, która pozwala to osiągnąć: border-radius.

Podstawowa składnia:

element {
  border-radius: wartość;
}

Przykład:

.box {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

Efekt działania: wszystkie cztery rogi elementu są zaokrąglone o 12 pikseli.

Efekt działania – sprawdź sam w JSFiddle

👉 Otwórz i przetestuj przykład

<style>
.box {
  width: 300px;
  margin: 40px auto;
  padding: 24px;
  background: #e3f2fd;
  border-radius: 16px;
  text-align: center;
  font-family: sans-serif;
}
</style>

<div class="box">
  Ten blok ma zaokrąglone rogi!
</div>

Możesz zaokrąglać tylko wybrane rogi

Jeśli chcesz większej kontroli, możesz ustawić osobno każdy róg:

.box {
  border-top-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 20px;
}

To przydatne np. przy kartach dialogowych, tooltipach, dymkach itp.

Pełne koło lub owal – `border-radius: 50%`

Jeśli element ma równą szerokość i wysokość, możesz nadać mu idealny, okrągły kształt:

.avatar {
  width: 100px;
  height: 100px;
  background: #90caf9;
  border-radius: 50%;
}

Efekt: element zmienia się w perfekcyjny okrąg – idealne np. dla zdjęć profilowych.

Obramowania – `border` w pigułce

W tej samej sekcji warto przypomnieć o możliwości stylizacji obramowań:

.element {
  border: 2px solid #2196f3;
}

2px – grubość
solid – styl (inne to np. dashed, dotted, double)
#2196f3 – kolor

Można też ustawiać obramowania tylko z jednej strony:

border-bottom: 3px solid #f44336;

Połączenie zaokrągleń i obramowań

To bardzo częsty przypadek – np. przy stylizacji kart, przycisków, okienek modalnych:

.card {
  background: white;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Dobre praktyki

Unikaj zbyt dużych wartości (np. 50px) – chyba że chcesz osiągnąć konkretny, „bąbelkowy” efekt.
Dla przycisków najczęściej używa się zaokrągleń w zakresie 6–12px.
border-radius: 50% + równa szerokość i wysokość = okrąg – proste i skuteczne.

Podsumowanie

border-radius pozwala zaokrąglać rogi elementów – całościowo lub selektywnie.
border umożliwia dodawanie ramek o różnych stylach i grubościach.
Te dwa style razem pozwalają stworzyć eleganckie przyciski, karty, awatary, panele itd.

W kolejnej lekcji pokażemy, jak tworzyć proste efekty 3D – za pomocą cieni, transformacji i perspektywy CSS.

Previous Temat

Back to Zagadnienie

Next Temat

Zaokrąglenia i obramowania (border-radius)