如何仅在一侧设置CSS边框?


74

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

目前,我有以下内容,这在所有方面都设置了边框:

#testdiv {
   border: 1px solid;
}

为了只在左侧边框,我需要做什么?

Answers:



22

如果要单独设置4个面,请使用:

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

18
    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
}

演示


11

您可以为所有边框分别指定边框,例如:

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

您还可以指定边框的外观,并为顶部,右侧,底部和左侧边框使用单独的样式。例如:

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


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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.