Why should maintain order to write these following CSS properties?

user_13206310 0
Viewed 67

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.

border-image border css
1 Answers

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>

user_86203330
Related