Ostatnio edytowany:

border-width

Autor: Virtual Patriot

Opis właściwości border-width

Za pomocą właściwości border-width możemy określić rozmiar szerokości obramowania jednocześnie po kilku stronach interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

medium

wyjątki initial
animowanie

tak

Interpretacja właściwości border-width

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

Za pomocą właściwości border-width oraz z góry zdefiniowanej grupy wartości możemy określić rozmiar szerokości obramowania jednocześnie po kilku stronach interesującego nas elementu HTML.

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

/* REGUŁA - 1 */
div {
  border-width:4px 8px 12px 16px;
}

/* REGUŁA - 2 */
div {
  border-top-width:4px;
  border-right-width:8px;
  border-bottom-width:12px;
  border-left-width:16px;
}

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

Ważne

wartości właściwości border-width możemy podawać według zasady formuły czterech wartości, dlatego tak naprawdę wymaganym składnikiem grupy wartości właściwości border-width jest tylko jeden składnik

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

Przykładowe zapisy

4px

4px 8px

4px 8px 12px

4px 8px 12px 16px

top

Składnik top jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik top określa wartość właściwości border-top-width, czyli rozmiar szerokości górnego obramowania interesującego nas elementu HTML.

Składnik right jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik right określa wartość właściwości border-right-width, czyli rozmiar szerokości prawego obramowania interesującego nas elementu HTML.

bottom

Składnik bottom jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik bottom określa wartość właściwości border-bottom-width, czyli rozmiar szerokości dolnego obramowania interesującego nas elementu HTML.

left

Składnik left jest wymaganym składnikiem grupy wartości właściwości border-width. Składnik left określa wartość właściwości border-left-width, czyli rozmiar szerokości lewego obramowania interesującego nas elementu HTML.

Przykład

  border-width:5px 10px;
rozmiar szerokości górnego oraz dolnego obramowania tego elementu "div" wynosi 5 pikseli, natomiast rozmiar szerokości prawego oraz lewego obramowania tego elementu "div" wynosi 10 pikseli, ponieważ do tego elementu "div" została dodana właściwość "border-width" wraz z następującą grupą wartości: "5px 10px"

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-width:5px 10px;
        border-style:solid;
        border-color:black;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości górnego oraz dolnego obramowania tego elementu "div" wynosi 5 pikseli, natomiast rozmiar szerokości prawego oraz lewego obramowania tego elementu "div" wynosi 10 pikseli, ponieważ do tego elementu "div" została dodana właściwość "border-width" wraz z następującą grupą wartości: "5px 10px"
    </div>

  </body>
</html>