Ostatnio edytowany:

border-top

Autor: Virtual Patriot

Opis właściwości border-top

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

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

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-top

Interpretacja właściwości border-top

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

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

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

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

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

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

Ważne

podana przez nas grupa wartości właściwości border-top 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-top. Składnik width określa wartość właściwości border-top-width, czyli rozmiar grubości górnego 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-top. Składnik style określa wartość właściwości border-top-style, czyli styl górnego 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-top. Składnik color określa wartość właściwości border-top-color, czyli kolor górnego obramowania interesującego nas elementu HTML.

Wartość domyślna

currentColor

Przykład

  border-top:6px solid blue;
do tego elementu "div" zostało dodane górne 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-top" 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-top:6px solid blue;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>