border-radius

Zaokrągla rogi elementu.

Wartość domyślna: 0
Dziedziczona: Nie
Animowalna: tak, jako długość lub procent
Dotyczy: wszystkie elementy poza tabelami z border-collapse: collapse
JavaScript: element.style.borderRadius = "12px"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.pill {
  border-radius: 999px;
  padding: 4px 12px;
}

HTML przykładu

<div class="stage" style="display: flex; align-items: center; gap: 12px;">
  <img class="avatar" src="/collections/covers/vibe-coding.webp" alt="">
  <span class="pill" style="background: #312e81;">Poziom 7</span>
</div>

Podgląd

Definicja i zastosowanie

Właściwość border-radius zaokrągla narożniki elementu. Działa na tło, obramowanie i cień, nawet jeśli element nie ma żadnego obramowania.

Jedna wartość zaokrągla wszystkie rogi jednakowo, cztery ustawiają kolejno lewy górny, prawy górny, prawy dolny i lewy dolny róg. Zapis z ukośnikiem, na przykład 50% / 20%, pozwala tworzyć rogi eliptyczne.

Wartość 50% na kwadratowym elemencie daje koło, a bardzo duża wartość w pikselach (np. 999px) na prostokącie daje kształt pigułki, niezależnie od jego szerokości.

Składnia

border-radius: <promień> (1–4 wartości) [ / <promień> (1–4 wartości) ]?;

Wartości

0
Ostre, prostokątne rogi.
12px
<długość>
Łagodnie zaokrąglone rogi.
50%
<procent>
Na kwadracie daje koło.
32px 4px
dwie wartości
Lewy górny i prawy dolny róg mocno zaokrąglone, pozostałe lekko.
50% / 20%
rogi eliptyczne
Różne promienie w poziomie i w pionie.

Wartość	Typ	Opis
0		Ostre, prostokątne rogi.
12px	<długość>	Łagodnie zaokrąglone rogi.
50%	<procent>	Na kwadracie daje koło.
32px 4px	dwie wartości	Lewy górny i prawy dolny róg mocno zaokrąglone, pozostałe lekko.
50% / 20%	rogi eliptyczne	Różne promienie w poziomie i w pionie.

Wartości w praktyce

Ostre, prostokątne rogi.

.demo { border-radius: 0; }

12px

Łagodnie zaokrąglone rogi.

.demo { border-radius: 12px; }

50%

Na kwadracie daje koło.

.demo { border-radius: 50%; }

32px 4px

Lewy górny i prawy dolny róg mocno zaokrąglone, pozostałe lekko.

.demo { border-radius: 32px 4px; }

50% / 20%

Różne promienie w poziomie i w pionie.

.demo { border-radius: 50% / 20%; }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Obraz w zaokrąglonym kontenerze wystaje poza rogi. Dodaj rodzicowi overflow: hidden albo nadaj promień samemu obrazowi.
Zagnieżdżone zaokrąglenia wyglądają najlepiej, gdy wewnętrzny promień równa się zewnętrznemu minus odstęp między nimi.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs