Własność CSS border-radius

Własność CSS border-radius to własność zbiorcza służąca do zaokrąglania wszystkich rogów elementu za pomocą jednej deklaracji CSS. Mimo że w jej nazwie jest słowo border, oznaczające obramowanie, rogi są zaokrąglane nawet wtedy, gdy element nie ma zdefiniowanego obramowania. Aby efekt był widoczny, wystarczy, aby element miał inne tło niż jego otoczenie.

Własność zbiorcza border-radius obejmuje następujące własności indywidualne:

• border-top-left-radius – lewy górny róg
• border-top-right-radius – prawy górny róg
• border-bottom-right-radius – dolny prawy róg
• border-bottom-left-radius – dolny lewy róg

Przykład

W poniższym przykładzie element figure będzie miał zaokrąglone wszystkie cztery rogi.

figure {
  background-color: lightpink;
  width: 200px;
  height: 40px;
  border-radius: 10px;
}
...
<figure></figure>

Efekt:

Składnia i typy wartości

Własność border-radius przyjmuje liczby z jednostką długości i wartości procentowe. Definiują one długość promieni wyznaczających ćwiartkę elipsy, której łuk określa kształt zaokrąglenia. Spójrz na poniższą ilustrację.

Ten przykład dotyczy ustawienia border-radius: 40px – zaokrąglenie wszystkich czterech rogów elementu kształtem łuku okręgu o promieniu 40 pikseli.

Aby zdefiniować zaokrąglenie eliptyczne, należy wprowadzić dodatkową wartość (lub dodatkowe wartości) po ukośniku, np.:

border-radius: 120px / 30px;

Efekt tej deklaracji będzie taki:

Wartości przed ukośnikiem oznaczają długość pierwszego promienia elipsy, a wartości po ukośniku określają długość drugiego promienia elipsy dla poszczególnych narożników. A ponieważ border-radius jest własnością zbiorczą, to odnosi się do wszystkich czterech rogów na raz. Dlatego deklaracja border-radius: 40px jest równoważna z poniższym zestawem deklaracji indywidualnych:

border-top-left-radius: 40px 40px;
border-top-right-radius: 40px 40px;
border-bottom-right-radius: 40px 40px;
border-bottom-left-radius: 40px 40px;

Natomiast deklaracja border-radius: 120px / 30px odpowiada poniższemu zestawowi deklaracji indywidualnych.

border-top-left-radius: 120px 30px;
border-top-right-radius: 120px 30px;
border-bottom-right-radius: 120px 30px;
border-bottom-left-radius: 120px 30px;

Oczywiście za pomocą własności border-radius zaokrąglenie każdego rogu elementu można zdefiniować osobno, np.:

border-radius: 10px 20px 30px / 14px 35px 50px;
border-radius: 10px 20px 30px / 14px 35px 50px 80;
border-radius: 10px 20px 30px 40px / 14px 35px 50px;

Podsumowując, własność border-radius przyjmuje jedną, dwie, trzy lub cztery wartości i opcjonalnie jeszcze jedną, dwie, trzy lub cztery wartości po ukośniku, jeśli zaokrąglenie ma mieć eliptyczny kształt.

Jeśli w deklaracji nie będzie ukośnika z następującymi po nim wartościami określającymi długości drugich promieni elipsy, to przeglądarka automatycznie uzna, że oba promienie są takie same, w efekcie czego otrzymamy zaokrąglenie koliste (elipsa o dwóch takich samych promieniach to okrąg).

Jeśli natomiast dodamy ukośnik i jakiekolwiek wartości za nim, to w tej grupie obowiązują takie same zasady uzupełniania brakujących wartości, jak w pierwszej, tej przed ukośnikiem. Poniżej znajduje się opis tych zasad, dla uproszczenia uwzględniający przypadek bez ukośnika.

• Jedna wartość: wszystkie cztery narożniki mają taki sam promień zaokrąglenia, np.:

  border-radius: 40px;

  Wszystkie rogi elementu będą miały zaokrąglenie w kształcie łuku okręgu o promieniu 40 pikseli.

  
• Dwie wartości: pierwsza odnosi się do lewego górnego i prawego dolnego rogu, a druga do prawego górnego i lewego dolnego rogu, np.:

  border-radius: 40px 20px;

  Lewy górny i prawy dolny róg elementu będą miały zaokrąglenie w kształcie łuku okręgu o promieniu 40 pikseli, a prawy górny i lewy dolny róg elementy będą miały zaokrąglenie w kształcie łuku okręgu o promieniu 20 pikseli.

  
• Trzy wartości: pierwsza wartość odnosi się do lewego górnego rogu, druga – do prawego górnego i lewego dolnego rogu, a trzecia – do prawego dolnego rogu, np.:

  border-radius: 60px 20px 40px;

  Lewy górny róg elementu będzie miał zaokrąglenie w kształcie łuku okręgu o promieniu 60 pikseli, prawy górny i lewy dolny rogi elementu będą miały zaokrąglenie w kształcie łuku okręgu o promieniu 20 pikseli, a prawy dolny – 40 pikseli.

  
• Cztery wartości: każda wartość odnosi się do jednego rogu elementu w następującej kolejności – lewy górny, prawy górny, prawy dolny, lewy dolny, np.:

  border-radius: 10px 20px 30px 40px;

  

Wartości procentowe

Wartości procentowe odnoszą się do szerokości i wysokości elementu, którego dotyczy dana deklaracja i mają takie same działanie, jak liczby z jednostką długości, ale za ich pomocą łatwiej jest uzyskać kształty elipsy i okręgu.

Na przykład, można zdefiniować element o takiej samej szerokości i wysokości, a następnie ustawić zaokrąglenie wszystkich czterech rogów na 50%, aby w ten sposób uzyskać koło, np.:

div {
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

Ta reguła CSS zamieni każdy element div w zielone koło o średnicy 200 pikseli, jak widać na poniższej ilustracji.

Z kolei poniższa reguła CSS z każdego elementu div utworzy granatową elipsę o średnicach 300 i 200 pikseli.

div {
  background-color: navy;
  width: 300px;
  height: 200px;
  border-radius: 50%;
}

Efekt:

Oczywiście taki sam efekt można uzyskać przez użycie każdego innego obsługiwanego typu wartości CSS, np. pikseli, ale wtedy trzeba wykonywać obliczenia. Natomiast w przypadku procentów wystarczy napisać 50% i gotowe.

Zaokrąglenie fizyczne i logiczne

Wszystkie własności obramowania, w tym także border-radius, należą do modułu własności i wartości logicznych CSS, a więc występują w dwóch odmianach – fizycznej i logicznej. Wszystkie opisane powyżej własności są fizyczne, czyli kierunki określają w odniesieniu do okna przeglądarki, a więc lewy górny róg to ten który znajduje się najbliżej lewego górnego rogu okna przeglądarki, prawy dolny róg to ten, który znajduje się najbliżej prawego dolnego rogu okna przeglądarki itd.

W logicznych własnościach CSS kierunki są określane nie względem okna przeglądarki tylko w odniesieniu do kierunku i orientacji tekstu, dlatego mogą one mieć różne znaczenie w zależności od tego, czy tekst jest pisany od góry, czy od dołu oraz czy jest pisany od lewej czy od prawej.

W związku z tym we własnościach logicznych nie posługujemy się określeniami typu lewa, prawa itd. tylko początek w orientacji blokowej, koniec w orientacji śródliniowej itd., ponieważ w tekście pisanym od lewej początek znajduje się w innym miejscu niż w tekście pisanym od prawej, np.:

div {
  background-color: navy;
  width: 150px;
  height: 100px;
  border-radius: 60px;
  border-start-start-radius: 10px;
  writing-mode: vertical-rl;
}

Tutaj zdefiniowaliśmy, że tekst w elemencie div jest pisany od prawej, jak np. w języku arabskim, w związku z czym jego początek w orientacji blokowej znajduje się „w prawym górnym rogu”. Spójrz na poniższy zrzut ekranu:

Jeśli w poprzedniej regule zmienimy kierunek tekstu na typowy dla języka polskiego, angielskiego itd., czyli od lewej, to jego początek znajdzie się w „lewym górnym rogu” i tam też znajdzie się nasze zaokrąglenie, jak widać na poniższym rysunku.

Istnieją cztery logiczne własności zaokrąglania rogów, które odpowiadają własnościom fizycznym. W poniższej tabeli znajduje się ich wykaz. Kliknij nazwę wybranej własności, aby przejść do jej szczegółowego opisu i pamiętaj, że elementy z lewej kolumny nie są bezpośrednimi odpowiednikami elementów z prawej kolumny – znaczenie własności logicznych zależy od kierunku i orientacji tekstu.

Zastosowanie

Własność border-radius ma zastosowanie do wszystkich elementów, a także do pseudoelementu ::first-letter.

Specyfikacja CSS nie wymaga, aby własność ta działała na elementach tabeli z ustawieniem własności border-collapse na collapse, ale większość przeglądarek obsługuje ją także w tej sytuacji.

Podsumowanie