Why should maintain order to write these following CSS properties?

We know from that if want to apply different color properties to any single element then the last properties will be applicable like this:

color: green;
color: blue;
color: yellow;

so the color of the text will be yellow as usual. But what is the problem in my case stated below???

If I write this order the effect works properly:

border-left: 7px solid;
border-image: linear-gradient(180deg, yellowgreen, green);
border-image-slice: 1;

But If I write this order the effect doesn't work properly:

border-image-slice: 1;
border-image: linear-gradient(180deg, yellowgreen, green);
border-left: 7px solid;

or,

border-image: linear-gradient(180deg, yellowgreen, green);
border-left: 7px solid;
border-image-slice: 1;

or any other order except the first order I mentioned above.

Solution

The only code that will not work in your list is this one:

border-image-slice: 1;
border-image: linear-gradient(180deg, yellowgreen, green);
border-left: 7px solid;

And it has nothing to do with border-left but it's related to border-image-slice that should be defined after border-image because border-image is the shorthand property that include the border-image-slice so if defined later, it will override the slice with the initial value since you are not defining any slice inside your border-image

examples to illustrate the issue and to show that border-left can be placed anywhere without any issue

.box {
  margin: 5px;
}

.b1 {
  border-image-slice: 1;
  border-image: linear-gradient(180deg, yellowgreen, green);
  
  border-left: 7px solid;
}

.b2 {
  border-image: linear-gradient(180deg, yellowgreen, green);
  border-image-slice: 1;
  
  border-left: 7px solid;
}

.b3 {
  border-left: 7px solid;
  
  border-image: linear-gradient(180deg, yellowgreen, green);
  border-image-slice: 1;
}

.b4 {
  border-left: 7px solid;
  
  border-image-slice: 1;
  border-image: linear-gradient(180deg, yellowgreen, green);
}

.b5 {
  border-left: 7px solid;
  
  border-image: linear-gradient(180deg, yellowgreen, green) 1;
}

.b6 {
  border-image: linear-gradient(180deg, yellowgreen, green);

  border-left: 7px solid;
  
  border-image-slice: 1;
}

.b7 {
  border-image: linear-gradient(180deg, yellowgreen, green) 1;
  
  border-left: 7px solid;
}

<div class="box b1">
  no border here
</div>
<div class="box b2">
  A border here
</div>
<div class="box b3">
  A border here
</div>
<div class="box b4">
  no border here
</div>
<div class="box b5">
  A border here, the slice is inside the border-image
</div>

<div class="box b6">
  A border here
</div>

<div class="box b7">
  A border here,  the slice is inside the border-image
</div>

To avoid such issue use border-image-source instead of border-image and all the combination will work since there is no shorthand involved

.box {
  margin: 5px;
  
  /* you can try any order and it will always work */
  border-image-slice: 1;
  border-image-source: linear-gradient(180deg, yellowgreen, green);
  border-left: 7px solid;
}

<div class="box">
  a border here
</div>