Zaokrąglenie rogów CSS – jak używać właściwości border-radius?

Właściwość CSS border-radius pozwala zaokrąglać wszystkie rogi elementu albo ustawiać promień każdego z nich osobno. Wystarczy podać wartość w pikselach, procentach lub innej jednostce CSS. Sprawdź, jak tworzyć zaokrąglone przyciski, karty, obrazy i niestandardowe kształty.

Jak działa border-radius?

Właściwość border-radius określa promień zaokrąglenia narożników elementu. Można zastosować ją do bloków, przycisków, pól formularzy, obrazów, kart i większości innych elementów mających obszar wyświetlania.

Najprostszy zapis wygląda tak:

.box {
  border-radius: 12px;
}

W tym przykładzie każdy róg elementu otrzyma promień o wartości 12 px. Im większa wartość, tym bardziej zaokrąglone będą narożniki.

border-radius nie zmienia rozmiaru elementu. Modyfikuje jedynie kształt jego narożników.

Jak ustawić zaokrąglenie wszystkich rogów?

Jedna wartość przypisana do border-radius działa na wszystkie cztery narożniki:

.card {
  border-radius: 16px;
}

Możesz używać także innych jednostek. Piksele zapewniają stały promień, natomiast procenty odnoszą się do wymiarów elementu.

.card-small {
  border-radius: 8px;
}

.card-fluid {
  border-radius: 5%;
}

W przypadku responsywnych komponentów procentowy promień może zmieniać się razem z szerokością i wysokością elementu. Do interfejsów użytkownika często wybiera się jednak wartości w pikselach, ponieważ łatwiej zachować spójny wygląd.

Jak ustawić każdy róg osobno?

Gdy narożniki mają różne promienie, użyj czterech wartości zapisanych zgodnie z ruchem wskazówek zegara:

.panel {
  border-radius: 4px 8px 12px 16px;
}

Kolejność wartości jest następująca:

• lewy górny róg,
• prawy górny róg,
• prawy dolny róg,
• lewy dolny róg.

Taki zapis przydaje się przy projektowaniu kart, zakładek lub elementów, których dolna i górna krawędź mają odmienny charakter wizualny.

Podawanie dwóch wartości

Dwie wartości oznaczają osobne promienie dla przeciwległych par narożników:

.box {
  border-radius: 10px 24px;
}

Pierwsza wartość dotyczy lewego górnego i prawego dolnego rogu, a druga prawego górnego i lewego dolnego. To skrócony zapis równoważny ustawieniu czterech wartości.

Jak używać właściwości narożników?

Możesz określać narożniki również za pomocą osobnych właściwości. Są czytelne wtedy, gdy potrzebujesz precyzyjnie kontrolować pojedynczy fragment elementu.

.button {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

W arkuszach stylów spotkasz następujące właściwości:

• border-top-left-radius dla lewego górnego narożnika,
• border-top-right-radius dla prawego górnego narożnika,
• border-bottom-right-radius dla prawego dolnego narożnika,
• border-bottom-left-radius dla lewego dolnego narożnika.

W praktyce skrót border-radius jest wygodniejszy, gdy konfigurujesz kilka narożników w jednym miejscu.

Jak zrobić koło za pomocą border-radius?

Aby uzyskać koło, element musi mieć identyczną szerokość i wysokość, a promień powinien wynosić 50%:

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
}

Wartość 50% zaokrągla narożniki tak mocno, że kwadrat przyjmuje kształt koła. W przypadku obrazów overflow: hidden ukrywa fragmenty grafiki wychodzące poza obrys.

Jeżeli szerokość i wysokość elementu są różne, ten sam zapis utworzy elipsę, a nie koło.

Jak zaokrąglić obraz?

Zaokrąglenie obrazu wymaga przypisania border-radius bezpośrednio do elementu img albo jego kontenera:

img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

Jeśli grafika ma wypełniać określony prostokąt, dodaj height oraz object-fit: cover:

.cover-image {
  width: 320px;
  height: 220px;
  border-radius: 16px;
  object-fit: cover;
}

object-fit: cover zachowuje proporcje obrazu i wypełnia cały obszar, ale może przyciąć jego fragmenty. Dzięki temu zaokrąglone krawędzie pozostają równe i przewidywalne.

Jak zaokrąglić obramowanie?

Promień dotyczy również obramowania elementu, dlatego możesz połączyć border i border-radius:

.notice {
  border: 2px solid #2563eb;
  border-radius: 10px;
  padding: 16px;
}

Zaokrąglenie obejmuje obszar obramowania, wypełnienia i zawartości. Jeżeli tło znajduje się na elemencie wewnętrznym, jego narożniki mogą wymagać osobnego ustawienia.

Przy większych promieniach grube obramowanie może wyglądać inaczej w narożniku niż na prostych odcinkach. Warto sprawdzić efekt na rzeczywistych wymiarach komponentu.

Jak tworzyć elipsy i niestandardowe kształty?

Składnia CSS pozwala podać poziomy i pionowy promień zaokrąglenia, rozdzielając je ukośnikiem:

.ellipse {
  border-radius: 50% / 25%;
}

Pierwsza część określa promienie w poziomie, a druga w pionie. Dzięki temu możesz tworzyć elipsy o różnej wysokości i szerokości.

Bardziej rozbudowany zapis umożliwia ustawienie osobnych promieni poziomych i pionowych dla czterech narożników:

.shape {
  border-radius: 40px 20px 60px 10px / 20px 40px 30px 15px;
}

Takie rozwiązanie jest przydatne przy tworzeniu dekoracyjnych bloków, nieregularnych kart i elementów inspirowanych formami organicznymi. W interfejsie użytkownika warto używać go oszczędnie, aby nie pogorszyć czytelności układu.

Jak połączyć border-radius z overflow?

Samo zaokrąglenie kontenera nie zawsze przytnie zawartość znajdującą się w środku. Jeżeli obraz, gradient lub element potomny ma pozostać wewnątrz zaokrąglonego obszaru, zastosuj:

.card {
  border-radius: 18px;
  overflow: hidden;
}

Wartość hidden ukrywa wszystko, co wychodzi poza granice elementu. Działa to dobrze w kartach z obrazem u góry, kolorowym nagłówkiem lub animowanym tłem.

Nie używaj tego ustawienia bez potrzeby. Może ono ukryć cienie, elementy wysuwane, podpowiedzi albo menu umieszczone poza granicami komponentu.

Jak używać border-radius w responsywnym interfejsie?

Promień powinien pasować do wielkości komponentu i gęstości układu. Ten sam promień może wyglądać subtelnie na dużej karcie, ale zbyt mocno na małym przycisku.

W razie potrzeby możesz zmieniać wartość za pomocą media queries:

.card {
  border-radius: 10px;
}

@media (min-width: 768px) {
  .card {
    border-radius: 18px;
  }
}

Wartości możesz również przechowywać w zmiennych CSS:

:root {
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

.button {
  border-radius: var(--radius-md);
}

.card {
  border-radius: var(--radius-lg);
}

Zmienne pomagają zachować jednolity system zaokrągleń w całym projekcie. Łatwiej wtedy zmienić wygląd wielu komponentów bez edytowania każdej reguły osobno.

Jak zaokrąglać elementy bez pogorszenia użyteczności?

Zaokrąglenie jest elementem wizualnym, ale nie powinno utrudniać obsługi interfejsu. Przyciski muszą zachować wyraźny obszar klikalny, a pola formularzy powinny mieć czytelny kontrast i widoczny stan fokusu.

Przy projektowaniu komponentów zwróć uwagę na następujące kwestie:

• zachowaj widoczny obrys fokusu klawiatury,
• nie ukrywaj komunikatów i podpowiedzi przez overflow: hidden,
• dobieraj promień do wielkości oraz funkcji elementu,
• sprawdzaj wygląd komponentu na małych ekranach.

Zaokrąglenie nie zastępuje informacji o stanie elementu. Użytkownik powinien nadal rozpoznać, czy przycisk jest aktywny, nieaktywny, zaznaczony albo znajduje się pod kursorem.

Jakie błędy pojawiają się przy używaniu border-radius?

Najczęstszym problemem jest zastosowanie promienia większego niż rozmiar elementu i oczekiwanie konkretnego kształtu. Przeglądarka ogranicza wartości geometrycznie, dlatego efekt może różnić się od pierwotnego założenia.

Inny błąd polega na ustawieniu border-radius na kontenerze, podczas gdy kolor tła lub obraz znajduje się w elemencie potomnym. W takiej sytuacji narożniki mogą nadal wyglądać ostro.

Przydatna lista kontrolna przed wdrożeniem komponentu obejmuje:

• sprawdzenie, czy promień dotyczy właściwego elementu,
• weryfikację działania obrazów i teł w narożnikach,
• testowanie stanu :hover, :focus i :disabled,
• kontrolę wyglądu przy różnych proporcjach i szerokościach ekranu.

W większości przypadków wystarczy prosty zapis z jedną wartością. Bardziej rozbudowane warianty warto stosować wtedy, gdy wynik wynika z konkretnego projektu interfejsu.