How can I set a css border on one side only?
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 sides:
#testdiv {
border: 1px solid;
}
What do I need to do in order to have a border only on the left side?
Solution 1:
#testdiv {
border-left: 1px solid;
}
See the MDN documentation on border.
Solution 2:
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;
Solution 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
}
DEMO