Ostatnio edytowany:

border-left

Autor: Virtual Patriot

Opis właściwości border-left

Za pomocą właściwości border-left możemy określić kilka różnych cech lewego obramowania interesującego nas elementu HTML.

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

medium none currentColor

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości border-left

Interpretacja właściwości border-left

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

Za pomocą właściwości border-left oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech lewego obramowania interesującego nas elementu HTML.

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

/* REGUŁA - 1 */
div {
  border-left:8px dotted blue;
}

/* REGUŁA - 2 */
div {
  border-left-width:8px;
  border-left-style:dotted;
  border-left-color:blue;
}

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

Ważne

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

Przykładowe zapisy

solid

9px solid

solid red

9px solid red

width

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

Wartość domyślna

medium

style

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

Wartość domyślna

none

color

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

Wartość domyślna

currentColor

Przykład

  border-left:6px solid blue;
do tego elementu "div" zostało dodane lewe 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-left" wraz z następującą grupą wartości: "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-left:6px solid blue;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      do tego elementu "div" zostało dodane lewe 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-left" wraz z następującą grupą wartości: "6px solid blue"
    </div>

  </body>
</html>