css - css ボーダーを片側だけに設定するにはどうすればよいですか?

Question

特定の場合div、左側、右側、上部、または下部にのみ境界線を表示したいと思います。

現在、私は次のものを持っています。これは、すべての側面に境界線を置きます:

#testdiv {
   border: 1px solid;
}

左側だけにボーダーを付けるにはどうすればよいですか?

Answer 1

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

border の MDN ドキュメントを参照してください。

Answer 2

4辺を別々に設定したい場合は、以下を使用してください。

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

Answer 3

    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
}

デモ

Answer 4

次のように、すべての境界線に対して個別に境界線を指定できます。

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

境界線の外観を指定して、上、右、下、左の境界線に個別のスタイルを使用することもできます。例えば：

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

Answer 5

このようにしてみてください

#testdiv{
  border-left:1px solid;

}

Answer 6

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