Ostatnio edytowany:

border-color

Autor: Virtual Patriot

Opis właściwości border-color

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

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

currentColor

wyjątki initial

fieldset

animowanie

tak

Interpretacja właściwości border-color

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

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

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

/* REGUŁA - 1 */
div {
  border-color:red green blue yellow;
}

/* REGUŁA - 2 */
div {
  border-top-color:red;
  border-right-color:green;
  border-bottom-color:blue;
  border-left-color:yellow;
}

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

Ważne

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

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

Przykładowe zapisy

red

red green

red green blue

red green blue yellow

top

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

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

bottom

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

left

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

Przykład

  border-color:red blue;
kolorem górnego oraz dolnego obramowania tego elementu "div" jest kolor czerwony, natomiast kolorem prawego oraz lewego obramowania tego elementu "div" jest kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border-color" wraz z następującą grupą wartości: "red 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-width:10px;
        border-style:solid;
        border-color:red blue;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      kolorem górnego oraz dolnego obramowania tego elementu "div" jest kolor czerwony, natomiast kolorem prawego oraz lewego obramowania tego elementu "div" jest kolor niebieski, ponieważ do tego elementu "div" została dodana właściwość "border-color" wraz z następującą grupą wartości: "red blue"
    </div>

  </body>
</html>