How can I set a css border on one side only?

CssBorder

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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

See the MDN documentation on border.

Solution 2 - Css

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 - Css

    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

Solution 4 - Css

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

Solution 5 - Css

Try like this

#testdiv{
  border-left:1px solid;

}

Solution 6 - Css

#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;
}
Categories
Recommended Css Solutions
Recommended Border Solutions

Previous Solution:

How to write XML declaration using xml.etree.ElementTree

PythonXmlElementtree

Next Solution:

How to check if $? is not equal to zero in unix shell scripting?

ShellUnix

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser782104View Question on Stackoverflow
Solution 1 - CssDenys SéguretView Answer on Stackoverflow
Solution 2 - CssotinanaiView Answer on Stackoverflow
Solution 3 - CssSowmyaView Answer on Stackoverflow
Solution 4 - CssGuffaView Answer on Stackoverflow
Solution 5 - CssGautam3164View Answer on Stackoverflow
Solution 6 - CsskorosmatickView Answer on Stackoverflow