Ostatnio edytowany:

border-bottom

Autor: Virtual Patriot

Opis właściwości border-bottom

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

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

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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

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

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

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

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

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

Ważne

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

Wartość domyślna

currentColor

Przykład

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

  <body>

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

  </body>
</html>