CSS border properties-CodePudding

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;

CodePudding user response：

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;

CodePudding user response：

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 ></div>
<div ></div>
<div ></div>
<div ></div>