Граница за отделни страни в CSS

Съществуват и свойства-съкращения за отделни страни: border-left (лява граница), border-right (дясна граница), border-top (горна граница), border-bottom (долна граница).

Нека направим само лява граница на блока с помощта на свойството border-left:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border-left: 1px solid red;
}

Результат:

А сега едновременно направим и лява, и дясна граница:

html<div id="elem"></div>

css#elem {
  width: 300px;
  height: 100px;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

Результат: