Ostatnio edytowany:

border-style

Autor: Virtual Patriot

Opis właściwości border-style

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

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

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
animowanie
  • nie

Interpretacja właściwości border-style

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

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

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

/* REGUŁA - 1 */
div {
  border-style:solid double dotted dashed;
}

/* REGUŁA - 2 */
div {
  border-top-style:solid;
  border-right-style:double;
  border-bottom-style:dotted;
  border-left-style:dashed;
}

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

Ważne

wartości właściwości border-style 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-style jest tylko jeden składnik

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

Przykładowe zapisy

solid

solid double

solid double dotted

solid double dotted dashed

top

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

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

bottom

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

left

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

Przykład

stylem górnego oraz dolnego obramowania tego elementu "div" jest styl "solid" (pojedyncza ciągła linia), natomiast stylem prawego oraz lewego obramowania tego elementu "div" jest styl "double" (podwójna ciągła linia), ponieważ do tego elementu "div" została dodana właściwość "border-style" wraz z następującą grupą wartości: "solid double"

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

  <body>

    <div>
      stylem górnego oraz dolnego obramowania tego elementu "div" jest styl "solid" (pojedyncza ciągła linia), natomiast stylem prawego oraz lewego obramowania tego elementu "div" jest styl "double" (podwójna ciągła linia), ponieważ do tego elementu "div" została dodana właściwość "border-style" wraz z następującą grupą wartości: "solid double"
    </div>

  </body>
</html>