Hoe kan ik alleen een CSS-rand aan één kant instellen?

Voor een gegeven divzou ik alleen een rand aan de linker, rechts, boven of onderkant weergeven.

Momenteel heb ik het volgende, dat aan alle kanten een rand brengt:

#testdiv {
   border: 1px solid;
}

Wat moet ik doen om een ​​rand alleen aan de linkerkant te hebben?

Antwoord 1, Autoriteit 100%

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

Zie de MDN-documentatie op de rand .

Antwoord 2, Autoriteit 17%

Als u 4 zijden afzonderlijk wilt instellen, gebruikt u:

border-width: 1px 2em 5px 0; /* top right bottom left */
border-style: solid dotted inset double;
border-color: #f00 #0f0 #00f #ff0;

Antwoord 3, Autoriteit 12%

   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

Antwoord 4, Autoriteit 8%

U kunt de rand afzonderlijk specificeren voor alle grenzen, bijvoorbeeld:

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

U kunt ook het uiterlijk van de rand specificeren en een aparte stijl gebruiken voor de bovenkant, rechts, onder- en linkerrorsen. Bijvoorbeeld:

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

Antwoord 5, Autoriteit 4%

Probeer als deze

#testdiv{
  border-left:1px solid;

}

Antwoord 6, Autoriteit 3%

#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;
}