Ostatnio edytowany:

border

Autor: Virtual Patriot

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.

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

przeznaczenie

element HTML każdego typu

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 szerokoś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ść rozmiaru linii

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.

Dostępne wartości

dowolna wybrana wartość stylu linii

Wartość domyślna

none

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.

Dostępne wartości

wybrany sposób definiowania wartości koloru w języku CSS

Wartość domyślna

currentColor

Przykład

  border:6px solid blue;
po każdej stronie tego elementu "div" zostało dodane obramowanie posiadające rozmiar szerokoś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:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      po każdej stronie tego elementu "div" zostało dodane obramowanie posiadające rozmiar szerokoś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>