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 grubości obramowania jednocześnie po kilku stronach interesującego nas elementu HTML.

Gdy stylem obramowania elementu HTML jest styl none lub hidden, wtedy rozmiarem grubości obramowania elementu HTML jest zawsze rozmiar "0".

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

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 gruboś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 gruboś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 gruboś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 gruboś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 grubości lewego obramowania interesującego nas elementu HTML.

Przykład

  border-width:5px 10px;
rozmiar grubości górnego oraz dolnego obramowania tego elementu "div" wynosi 5 pikseli, natomiast rozmiar gruboś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 grubości górnego oraz dolnego obramowania tego elementu "div" wynosi 5 pikseli, natomiast rozmiar gruboś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>