Właściwość CSS border-radius

Definicja stylu, przeznaczenie i użycie border-radius

Styl border-radius definiuje promień narożników elementu, ta właściwość umożliwia dodawanie zaokrąglonych narożników do elementów.

Ta właściwość może mieć od jednej do czterech wartości. Oto zasady:

• Cztery wartości: border-radius: 15px 60px 30px 5px;
  • pierwsza wartość dotyczy lewego górnego rogu,
  • druga wartość dotyczy prawego górnego rogu,
  • trzecia wartość dotyczy prawego dolnego rogu,
  • czwarta wartość dotyczy lewego dolnego rogu.

• Trzy wartości - border-radius: 15px 50px 30px;
  • pierwsza wartość dotyczy lewego górnego rogu,
  • druga wartość dotyczy prawego górnego i lewego dolnego rogu,
  • trzecia dotyczy prawego dolnego rogu.

• Dwie wartości - border-radius: 10px 60px;
  • pierwsza wartość dotyczy lewego górnego i prawego dolnego rogu,
  • druga wartość dotyczy prawego górnego i lewego dolnego rogu.

• Jedna wartość - border-radius: 10px;
  • wartość dotyczy wszystkich czterech rogów, które są jednakowo zaokrąglone.

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

Składnia CSS border-radius

border-radius: 1-4 length | % / 1-4 length | % | initial | inherit;

Wsparcie przeglądarek dla właściwości border-radius

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Liczba przed -webkit- i -moz- określa pierwszą wersję, która działała z prefiksem.

Właściwość
border-radius	5.0 4.0 -webkit	9.0	4.0 3.0 -moz	5.0 3.1 -webkit-	10.5

Przykładowe zastosowania z właściwością border-radius

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

div {
    border-radius:100px;
}

Przykłady właściwości border-radius

Przykład 1. Dodaje zaokrąglone rogi do dwóch elementów <div>: #przyklad1 { border: 2px solid red; border-radius: 25px; } #przyklad2 { border: 2px solid red; border-radius: 50px 20px; } Przykład 2. Ustawia zaokrąglone rogi dla elementu z kolorem tła: #przyklad3 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } Przykład 3. Ustawia zaokrąglone rogi dla elementu z obramowaniem: #przyklad4 { border-radius: 25px; border: 2px solid #73AD21; padding: 20px; width: 200px; height: 150px; } Przykład 4. Ustawia zaokrąglone rogi dla elementu z obrazem tła: #przyklad5 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; } Przykład 5. Zwróć również uwagę na to: #przyklad6 { border-radius: 2em / 5em; } /* is equivalent to: border-top-left-radius: 2em 5em; border-top-right-radius: 2em 5em; border-bottom-right-radius: 2em 5em; border-bottom-left-radius: 2em 5em; */ #przyklad7 { border-radius: 2em 1em 4em / 0.5em 3em; } /* is equivalent to: border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; */