CSS pozwala nadawać elementom na stronie obramowanie. Obramowanie można nadawać zarówno ze wszystkich stron jak i tylko np. z jednej strony.

Aby ustawić obramowanie należy obowiązkowo podać styl i grubość. Można również ustawiać kolor obramowania.

Przykład:
<p style="border-style: styl; border-width: szerokość ">Tekst</p>

Style obramowania
-none - brak obramowania
-hidden - ukryte obramowanie
-dashed - linia kreskowa
-dotted - linia kropkowa
-solid - linia ciągła
-double - linia ciągła podwójna
-groove - "rowek"
-ridge - "grzbiet"
-inset - "ramka"
-outset - "przycisk"

Można ustawiać style cząstkowe lub całkowite:
-border-style -ze wszystkich stron
-border-top-style – od góry
-border-bottom-style -od dołu
-border-left-style -od lewej
-border-right-style -od prawej

Grubość obramowania
Można ustawiać z każdej strony elementu inną grubość:
-border-width -ze wszystkich stron
-border-top-width – od góry
-border-bottom-width -od dołu
-border-left-width -od lewej
-border-right-width -od prawej

Jako szerokość można podawać:
-thin - cienkie obramowanie
-medium - średnie obramowanie
-thick - grube obramowanie
-konkretną wartość w jednostkach długości

Obramowaniu można nadać również kolor.
Np. <p style="border-style: solid; border-width: 1px; border-color: blue; ">Niebieskie obramowanie </p>

Kolory można zapisywać nie tylko nazwą, ale również zapisem szesnastkowym lub modelem RGB.
Np.
styl szesnastkowy:
<p style="border-style: solid; border-width: 1px; border-color: #000000; ">Czarne obramowanie </p>
model RGB
<p style="border-style: solid; border-width: 1px; border-color: rgb(0,0,0); ">Czarne obramowanie </p>

Można oczywiście z każdej strony ustawić inny kolor.

Przykład mieszanego obramowania:
<p style="border-top-style: solid; border-top-width: 1px; border-top-color: red;">Czerwone ciągłe obramowanie </p>
<p style="border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: blue;">Niebieskie kropkowane obramowanie </p>
<p style="border-left-style: double; border-left-width: 1px; border-left-color: green;">Zielone podwójne obramowanie </p>
<p style="border-right-style: dashed; border-right-width: 1px; border-right-color: yellow;">Żółte kreskowane obramowanie </p>