W┼éasno┼Ť─ç CSS border-radius

> Dodaj do ulubionych

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:

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:

Efekt u┼╝ycia w┼éasno┼Ťci CSS border-radius

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─Ö.

Schemat ┼éuku okr─Ögu zaokr─ůglenia przez w┼éasno┼Ť─ç CSS border-radius

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:

Eliptyczne zaokr─ůglenie rog├│w przez w┼éasno┼Ť─ç border-radius

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.

    Wszystkie cztery rogi maj─ů takie samo zaokr─ůglenie
  • 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.

    Rogi zaokr─ůglone parami
  • 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.

    Rogi zaokr─ůglone przy u┼╝yciu trzech warto┼Ťci
  • 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;
    Ka┼╝dy r├│g zaokr─ůglony inaczej

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.

Ko┼éo utworzone za pomoc─ů w┼éasno┼Ťci border-radius

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:

Elipsa utworzona za pomoc─ů w┼éasno┼Ťci border-radius

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:

Zaokr─ůglenie w elemencie z tekstem pisanym od prawej

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.

Zaokr─ůglenie rog├│w w elemencie z tekstem pisanym od lewej

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.

W┼éasno┼Ťci fizyczne zaokr─ůgleniaW┼éasno┼Ťci logiczne zaokr─ůglenia

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

ZastosowanieWszystkie elementy HTML Wszystkie elementy HTML i pseudoelement ::first-letter
W┼éasno┼Ťci sk┼éadowe
Obs┼éugiwane warto┼Ťci
Warto┼Ť─ç pocz─ůtkowaWarto┼Ťci pocz─ůtkowe odpowiadaj─ů warto┼Ťciom pocz─ůtkowym w┼éasno┼Ťci sk┼éadowych, czyli 0 dla ka┼╝dej z nich
DziedziczenieNie
SpecyfikacjaCSS Backgrounds and Borders Module Level 3 ÔÇô border-radius