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.