Autor publikacji: Virtual Patriot - Administrator

border

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - border property (LV3)

Przeznaczenie właściwości `border`

Za pomocą właściwości border możemy określić kilka różnych cech obramowania jednocześnie po wszystkich stronach interesującego nas elementu HTML.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `border`

przeznaczenie: element HTML każdego typu
pozycja: dowolna
dziedziczenie: nie
wartość initial: medium none currentColor
wyjątki initial: brak
animowanie: tak (animacja nieciągła dla wartości składnika style)

Interpretacja właściwości `border`

: tak
: tak
: tak
: tak
: tak
: tak

Opis wartości właściwości `border`

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości border oraz z góry zdefiniowanego wzorca wartości możemy określić kilka różnych cech obramowania jednocześnie po wszystkich stronach interesującego nas elementu HTML.

Składniki wzorca wartości właściwości `border`

            width style color

Przykładowe zapisy

solid

9px solid

solid red

9px solid red

width

Składnik width nie jest wymaganym składnikiem wzorca wartości właściwości border. Składnik width określa rozmiar grubości obramowania jednocześnie po wszystkich stronach interesującego nas elementu HTML.

Dostępne wartości: dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną lub dowolna wybrana wartość grubości linii
Informacje dodatkowe: gdy wartością składnika style jest wartość none lub wartość hidden, wtedy rozmiarem grubości obramowania elementu HTML jest zawsze rozmiar 0
Wartość domyślna: medium

style

Składnik style nie jest wymaganym składnikiem wzorca wartości właściwości border. Składnik style określa styl obramowania jednocześnie po wszystkich stronach interesującego nas elementu HTML.

color

Składnik color nie jest wymaganym składnikiem wzorca wartości właściwości border. Składnik color określa kolor obramowania jednocześnie po wszystkich stronach interesującego nas elementu HTML.

Przykład

  border:6px solid blue;

po każdej stronie tego elementu "div" zostało dodane obramowanie posiadające rozmiar grubości równy 6 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border" wraz z następującymi wartościami: "6px solid blue"

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:6px solid blue;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      po każdej stronie tego elementu "div" zostało dodane obramowanie posiadające rozmiar grubości równy 6 pikseli, styl "solid" (pojedyncza ciągła linia) oraz kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border" wraz z następującymi wartościami: "6px solid blue"
    </div>

  </body>
</html>