Question

Can we shorten :

border-top:1px solid black;
border-left:2px solid red;
border-bottom:3px solid green;
border-right:4px solid blue;

To something similar to :

border:1px solid black 2px solid red 3px solid green 4px solid blue;

N.B: I know already this way:

border-width:1px 2px 3px 4px;
border-style:solid;
border-color:black red green blue;

Answer 1

Nope, you can’t make it any shorter than the examples you’ve provided.

From the docs

Unlike the shorthand ‘margin’ and ‘padding’ properties, the ‘border’
property cannot set different values on the four borders. To do so,
one or more of the other border properties must be used.

_{Thanks @Rocket}

---

If you are using a preprocessor (like SCSS), you could try and use a mixin, but I hardly believe that’s what you want:

@mixin border_shorthand(
$top_width, $top_color, $top_style,
$left_width, $left_color, $left_style,
$bottom_width, $bottom_color, $bottom_style,
$right_width, $right_color, $right_style) {
  border-top: $top_width $top_color $top_style;
  border-left: $left_width $left_color $left_style;
  border-bottom: $bottom_width $bottom_color $bottom_style;
  border-right: $right_width $right_color $right_style;
}

.element {
  @include border_shorthand(1px, black, solid, 2px, red, solid, 3px, green, solid, 4px, blue, solid);
}

Which outputs:

.element {
  border-top: 1px black solid;
  border-left: 2px red solid;
  border-bottom: 3px green solid;
  border-right: 4px blue solid; }