CSS3 - Zaokrąglenie (border-radius)

Jeszcze nie tak dawno zaokrąglenie narożników elementu wymagało ustawiania specjalnej grafiki lub grafik w tle, obrazujących zaokrąglenie. Bywało to dosyć kłopotliwe i często wymagało planowania z góry rozmiarów elementu. W CSS3 dodane zostały właściwości pozwalające na zaokrąglenie narożników. Pozwalają one na ustawienie jednakowego zaokrąglenia dla wszystkich narożników, jak również indywidualnego zaokrąglenia dla poszczególnych narożników elementu.

Zobacz:


Indywidualne zaokrąglenie narożnika

Do określania zaokrąglenia narożników elementu służą właściwości: border-top-left-radius, border-top-right-radius, border-bottom-left-radius oraz border-bottom-right-radius.

Narożniki można zaokrąglać symetrycznie, ale i niesymetrycznie względem ich osi. W przypadku zaokrągleń niesymetrycznych podaje się dwa rozmiary, natomiast w przypadku zaokrąglenia symetrycznego wystarczy jeden rozmiar. Dla rozmiarów podanych w procentach zaokrąglenie zależy od wymiarów elementu.

<p>Górny lewy narożnik ma ustawione dwa rozmiary. Zaokrąglenie ma rozmiar niesymetryczny 150 na 50 pikseli.<br>Górny prawy narożnik ma ustawiony jeden rozmiar. Zaokrąglenie ma rozmiar symetryczny 100 na 100 pikseli.<br>Dolny lewy narożnik ma ustawione dwa rozmiary procentowe. Zaokrąglenie ma rozmiar 10 procent szerokości na 15 procent wysokości elementu.<br>Dolny prawy narożnik na ustawiony jeden rozmiar procentowy. Zaokrąglenie ma rozmiar 35 procent szerokości na 35 procent wysokości elementu.</p>
p {
   padding: 25px;
   background-color: #59b259;
   border-top-left-radius: 150px 50px;
   border-top-right-radius: 100px;
   border-bottom-left-radius: 10% 15%;
   border-bottom-right-radius: 35%;
}

Górny lewy narożnik ma ustawione dwa rozmiary. Zaokrąglenie ma rozmiar niesymetryczny 150 na 50 pikseli.
Górny prawy narożnik ma ustawiony jeden rozmiar. Zaokrąglenie ma rozmiar symetryczny 100 na 100 pikseli.
Dolny lewy narożnik ma ustawione dwa rozmiary procentowe. Zaokrąglenie ma rozmiar 10 procent szerokości na 15 procent wysokości elementu.
Dolny prawy narożnik na ustawiony jeden rozmiar procentowy. Zaokrąglenie ma rozmiar 35 procent szerokości na 35 procent wysokości elementu.

Wartości właściwości border-*-radius:

Wartość Opis
długość Określa rozmiar zaokrąglenia w jednostkach długości (px, pt, em, itd.).
Domyślna wartość "0".
% Określa rozmiar zaokrąglenia w procentach długości krawędzi.
initial Ustawia wartość właściwości na wartość domyślną.
inherit Wartość właściwości jest dziedziczona z elementu nadrzędnego.

Zbiorczy zapis właściwości zaokrąglenia

Zbiorczy zapis pozwala na ustawienie zaokrąglenia wszystkich narożników w jednej deklaracji.

Dopuszczalne są cztery formy zapisu właściwości skróconej dla narożników symetrycznych:

  • podawany jest jeden rozmiar,
    border-radius: 10px;
    Wszystkie narożniki mają zaokrąglony symetryczny rozmiar 10px.
  • podawane są dwa rozmiary,
    border-radius: 10px 20px;
    Zaokrąglenia górnego lewego i dolnego prawego narożnika mają rozmiar 10px, górnego prawego i dolnego lewego mają rozmiar 20px.
  • podawane są trzy rozmiary,
    border-radius: 10px 20px 30px;
    Zaokrąglenie górnego lewego narożnika ma rozmiar 10px, górnego prawego i dolnego lewego mają rozmiar 20px, dolnego prawego ma rozmiar 30px.
  • podawane są cztery rozmiary,
    border-radius: 10px 20px 30px 40px;
    Zaokrąglenie górnego lewego narożnika ma rozmiar 10px, górnego prawego ma rozmiar 20px, dolnego prawego ma rozmiar 30px, dolnego lewego ma rozmiar 40px.

Zbiorczy zapis zaokrągleń niesymetrycznych buduje się analogicznie, przy założeniu, że potrzebne są dwie wartości określające zaokrąglenie narożnika, na przykład:

  • podawane są: jeden rozmiary / dwa rozmiary,
    border-radius: 10px / 20px 30px;
    Zaokrąglenie górnego lewego narożnika ma rozmiar 10px na 20px, górnego prawego ma rozmiar 10px na 30px, dolnego prawego ma rozmiar 10px na 20px, dolnego lewego ma rozmiar 10px na 30px.
  • podawane są: cztery rozmiary / jeden rozmiar,
    border-radius: 10px 20px 30px 40px / 15px;
    Zaokrąglenie górnego lewego narożnika ma rozmiar 10px na 15px, górnego prawego ma rozmiar 20px na 15px, dolnego prawego ma rozmiar 30px na 15px, dolnego lewego ma rozmiar 40px na 15px.
  • podawane są: trzy rozmiary / dwa rozmiary,
    border-radius: 10px 30px 40px / 15px 25px;
    Zaokrąglenie górnego lewego narożnika ma rozmiar 10px na 15px, górnego prawego ma rozmiar 30px na 25px, dolnego prawego ma rozmiar 40px na 15px, dolnego lewego ma rozmiar 30px na 25px.

Właściwości zaokrąglenia

Właściwość Opis CSS
border-radius Zbiorczy zapis właściwości zaokrąglenia. 3
border-top-left-radius Zaokrąglenie górnego lewego narożnika elementu. 3
border-top-right-radius Zaokrąglenie górnego prawego narożnika elementu. 3
border-bottom-left-radius Zaokrąglenie dolnego lewego narożnika elementu. 3
border-bottom-right-radius Zaokrąglenie dolnego prawego narożnika elementu. 3