Граница за одделни страни во 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;
}

Результат: