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
dziedziczenie
  • nie
wartość initial
  • medium none currentColor
wyjątki initial
  • brak
animowanie
  • tak, lecz nie wartość składnika style

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 szerokoś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

do tego elementu "div" zostało dodane górne 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-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:#AFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>