Podstawowa składania właściwości obramowania w CSS ma prostą postać, ale przyjmuje wiele wartości. 

div {border: border-width border-style border-color;}
Ustawiając właściwość jak poniżej, każdy div dostanie obramowanie o szerokości 2px, kolorze czerwonym oraz linia będzie ciągła. 

div {border: 2px solid red;}

Szerokość border-width podajemy za pomocą umownych wartości jak thin, medium, thick lub wartości liczbowych, lub procentowych. Używając wartości liczbowych i procentowych mamy większą kontrolę. Gdy podasz wartość w pikselach, grubość obramowania ma dokładnie taką wartość. Gdy podasz szerokość obramowania w procentach, grubość obramowania ma wartość procentową w stosunku do całego bloku.

Style linii obramowania, czyli  border-style,  mogą przyjąć jedną z poniższych wartości:

  • none - czyli brak obramowania, przeglądarka w tym przypadku ustawia szerokość na 0. Jest to domyślna wartość.
  • dashed -  czyli serie kresek.
  • dotted - obramowanie stworzone jest z linii kropkowanej.
  • double - obramowanie ma postać dwóch ciągłych linii.
  • groove  - obramowanie przyjmuje  efekt wyrzeźbienia.
  • inset  - obramowanie z efektem zapadnięcia bloku.
  • outset  -  obramowanie, które jest odwrotnością 'inset'. Blok wydaje się wysunięty z powierzchni. 
  • ridge -  przeciwieństwo obramowania 'groove'.
  • solid - w mojej ocenie najpopularniejsze obramowanie, które będziesz używał w CSS. Jest to  pojedyncza, prosta i ciągła linia.

Wartość border-color przyjmuje wartości kolory jak każdy inny element HTML.

Każdy element w HTML ma cztery linie obramowania.