我怎样才能设置一个 CSS 边框只有一边？

对于给定的 div，我希望只显示左边、右边、上边或底边的边框。

目前我有以下条款，它们将边界划分在各个方面:

#testdiv {
border: 1px solid;
}

我需要做什么才能有一个 只在左边有边界？

css
border

232866 次浏览

小开

最佳答案

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

See the MDN documentation on border.

小开

Try like this

#testdiv{
border-left:1px solid;

}

小开

    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

小开

If you want to set 4 sides separately use:

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

小开

You can specify border separately for all borders, for example:

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

You can also specify the look of the border, and use separate style for the top, right, bottom and left borders. for example:

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

小开

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