Bordes para lados individuales en CSS

También existen propiedades abreviadas para lados individuales: border-left (borde izquierdo), border-right (borde derecho), border-top (borde superior), border-bottom (borde inferior).

Vamos a hacer solo el borde izquierdo para el bloque usando la propiedad border-left:

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

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

Результат:

Y ahora hagamos simultáneamente los bordes izquierdo y derecho:

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

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

Результат: