que - ¿Cómo puedo establecer un borde CSS solo en un lado?

selectores avanzados css

Question

Para un div dado, me gustaría mostrar solo un borde en el lado izquierdo, derecho, superior o inferior.

Actualmente tengo lo siguiente, que pone un borde en todos los lados:

#testdiv {
   border: 1px solid;
}

¿Qué debo hacer para tener un borde solo en el lado izquierdo ?

Answer 1

Intenta así

#testdiv{
  border-left:1px solid;

}

Answer 2

Puede especificar el borde por separado para todos los bordes, por ejemplo:

#testdiv{
  border-left: 1px solid #000;
  border-right: 2px solid #FF0;
}

También puede especificar el aspecto del borde y usar un estilo separado para los bordes superior, derecho, inferior e izquierdo. por ejemplo:

#testdiv{
  border: 1px #000;
  border-style: none solid none solid;
}

Answer 3

Si desea establecer 4 lados por separado, use:

border-width: top right bottom left;
border-style: solid dotted inset double;
border-color: #f00 #0f0 #00f #ff0;

Answer 4

    div{
    border-left:solid red 3px;
    border-right:solid violet 4px;
    border-top:solid blue 4px;
    border-bottom:solid green 4px;
    background:grey;
    width:100px; height:50px
}

DEMO

Answer 5

#testDiv{
    /* set green border independently on each side */
    border-left: solid green 2px;
    border-right: solid green 2px;
    border-bottom: solid green 2px;
    border-top: solid green 2px;
}

Answer 6

#testdiv {
   border-left: 1px solid;
}

Consulte la documentación de MDN en el borde .