For a given div
I would like to only display a border on the left, right, top, or bottom side.
Currently I have the following, which puts a border on all s
#testdiv {
border-left: 1px solid;
}
See the MDN documentation on border.
Try like this
#testdiv{
border-left:1px 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;
}
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
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;
}
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;