CSS border properties - css

Question

Is there a better way I can write this CSS border property in one line as top-left is 1px and right-bottom are 3px
border-top: 1px solid #000;
border-right: 3px solid #000;
border-left: 1px solid #000;
border-bottom: 3px solid #000;

Answer 1

Yeah, when you say:
border: 1px solid black;
It gets translated this way:
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 1px;
The first line is called shorthand version.
border: 1px solid black is basically shorthanded for border-color, border-width, border-style.
And each of these are also a shorthand.
You can just say it this way:
border: solid black;
border-width: 1px 3px 3px 1px;

Answer 2

You only can merge top + bottom and left + right (example case .two).
You can save 1 line by using border-color, border-style and border-width (the order is top, right, bottom and then left).
You can save 1 additionnal line by merging border-color and border-style in border
.square{
width:50px;
height:50px;
background-color:orange;
margin-bottom:10px;
}
.one{
border-top: 1px solid #000;
border-right: 3px solid #000;
border-left: 1px solid #000;
border-bottom: 3px solid #000;
}
.two{
border-color: #000;
border-style: solid;
border-width: 1px 3px;
}
.three{
border-color: #000;
border-style: solid;
border-width: 1px 3px 3px 1px;
}
.four{
border: #000 solid;
border-width: 1px 3px 3px 1px;
}
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
<div class="square four"></div>