Kategorie
Kurs CSS

Obramowanie

Ramki na stronie możemy stosować w celu wyróżnienia określonego elementu albo do zbudowania estetycznej struktury strony.

Obramowanie ustalamy za pomocą border.

selektor { border: wartość; }

W przypadku ramki wartość ma postać:

p { border: a b c; }
  • a – width (szerokość)
  • b – style (styl)
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
  • c – color (kolor)

Możemy ustawić osobno każdą z ramek:

  • border-left – lewa
  • border-right – prawa
  • border-top – górna
  • border-bottom – dolna
p {
border-left-width: 3px;
border-left-style: solid;
border-left-color: red;
}

Powyższa deklaracja jest równoznaczna poniższemu zapisowi.

p { border-left: 3px solid red; }

Przykład

Obramowanie z lewej strony w kolorze czerwonym o grubości 3px.

p { border: 5px dashed green; }

Przykład

Obramowanie w kolorze zielonym o grubości 5px.

Teraz dodamy zaokrąglenia narożników.

p { border: 2px solid green; border-radius: 5px 10px 5px 10px; }

Przykład

Obramowanie w kolorze zielonym o grubości 5px z zaokrąglonymi narożnikami.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *