Bordas para lados individuais em CSS

Também existem propriedades abreviadas para lados individuais: border-left (borda esquerda), border-right (borda direita), border-top (borda superior), border-bottom (borda inferior).

Vamos aplicar apenas a borda esquerda ao elemento usando a propriedade border-left:

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

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

Результат:

E agora, vamos aplicar as bordas esquerda e direita simultaneamente:

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

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

Результат: