Ostatnio edytowany:

border-radius

Autor: Virtual Patriot

Opis właściwości border-radius

Za pomocą właściwości border-radius możemy określić rozmiary zaokrąglenia kilku różnych rogów interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości border-radius

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
  • 0
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości border-radius

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości border-radius

grupa wartości

Opis

Za pomocą właściwości border-radius oraz z góry zdefiniowanej grupy wartości możemy określić rozmiary zaokrąglenia kilku różnych rogów interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  border-radius:12px 14px 16px 18px /20px 22px 24px 26px;
}

/* REGUŁA - 2 */
div {
  border-top-left-radius:12px 20px;
  border-top-right-radius:14px 22px;
  border-bottom-right-radius:16px 24px;
  border-bottom-left-radius:18px 26px;
}

Składniki grupy wartości właściwości border-radius

Ważne

ewentualne wartości odpowiedzialne za zaokrąglenia w pionie poszczególnych rogów elementu HTML należy podać po znaku /, dlatego tak naprawdę grupa wartości właściwości border-radius może składać się z od jednego do ośmiu różnych składników. Ponadto wartości właściwości border-radius możemy podawać według zasady formuły czterech wartości (zasada ta tyczy się również ewentualnych wartości występujących po znaku /), dlatego tak naprawdę wymaganym składnikiem grupy wartości właściwości border-radius jest tylko jeden składnik.

podana przez nas grupa wartości właściwości border-radius nie może zawierać wartości globalnych

Przykładowe zapisy

12px

12px 24px

12px 24px 36px

12px 24px 36px 48px

12px /24px

12px /24px 36px

12px 14px 16px /18px

12px 14px 16px 18px /20px 22px 24px 26px

top-left

Składnik top-left jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik top-left określa wartość właściwości border-top-left-radius, czyli rozmiar zaokrąglenia lewego górnego rogu interesującego nas elementu HTML.

top-right

Składnik top-right jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik top-right określa wartość właściwości border-top-right-radius, czyli rozmiar zaokrąglenia prawego górnego rogu interesującego nas elementu HTML.

bottom-right

Składnik bottom-right jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik bottom-right określa wartość właściwości border-bottom-right-radius, czyli rozmiar zaokrąglenia prawego dolnego rogu interesującego nas elementu HTML.

bottom-left

Składnik bottom-left jest wymaganym składnikiem grupy wartości właściwości border-radius. Składnik bottom-left określa wartość właściwości border-bottom-left-radius, czyli rozmiar zaokrąglenia lewego dolnego rogu interesującego nas elementu HTML.

Przykład

rozmiar zaokrąglenia w poziomie wszystkich rogów tego elementu "div" wynosi 12 pikseli, natomiast rozmiar zaokrąglenia w pionie wszystkich rogów tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "border-radius" wraz z następującą grupą wartości: "12px /24px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        border-radius:12px /24px;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar zaokrąglenia w poziomie wszystkich rogów tego elementu "div" wynosi 12 pikseli, natomiast rozmiar zaokrąglenia w pionie wszystkich rogów tego elementu "div" wynosi 24 piksele, ponieważ do tego elementu "div" została dodana właściwość "border-radius" wraz z następującą grupą wartości: "12px /24px"
    </div>

  </body>
</html>