css - 如何仅在一侧设置 CSS 边框？

Question

对于给定的，div我只想在左侧、右侧、顶部或底部显示边框。

目前我有以下内容，它在所有方面都设置了边界：

#testdiv {
   border: 1px solid;
}

我需要做什么才能只在左侧有边框？

score 156 · Accepted Answer

156

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

请参阅有关边界的 MDN 文档。

于 2013-03-14T09:20:38.843 回答

score 27 · Accepted Answer

如果要分别设置 4 面，请使用：

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

score 19 · Accepted Answer

    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
}

演示

score 13 · Accepted Answer

您可以为所有边框分别指定边框，例如：

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

您还可以指定边框的外观，并为上、右、下和左边框使用单独的样式。例如：

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

score 6 · Accepted Answer

6

像这样试试

#testdiv{
  border-left:1px solid;

}

于 2013-03-14T09:20:51.357 回答

score 4 · Accepted Answer

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

css - 如何仅在一侧设置 CSS 边框？

6 回答 6

Related

Reference