.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
This will set different widths, border-color and border-style for each of the four borders.
In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.
Checkout the fiddle here to understand better
.box {
width: 150px;
height: 150px;
margin: 20px auto;
border-color: red blue green yellow;
border-style: solid dashed dotted double;
border-width: 20px 10px 5px 15px;
}
css
.xyz {
margin: 50px;
width: 300px;
height: 300px;
background-color: #fff;
border-left: 20px solid black;
border-right: 20px solid black;
box-shadow: 0px -20px 0 0 red;
height: 150px;
width: 150px;
}