Autor publikacji
Virtual Patriot - Administrator

border

Data publikacji
Ostatnio edytowano

Opis 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

Dodatkowe techniczne informacje 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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

wzorzec wartości

Opis

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

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.

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>