Ostatnio edytowany:

border-right

Autor: Virtual Patriot

Opis właściwości border-right

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

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

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

Interpretacja właściwości border-right

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

grupa wartości

Opis

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

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

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

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

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

Ważne

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

Wartość domyślna

currentColor

Przykład

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

  <body>

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

  </body>
</html>