Use of border-image display 4 dots in corners of my div

Question

I am trying to set a gradient color to my border using border-image. However when is use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%); I only get a single dot in each of the corners of my DIV... Anybody knows why this is not showing the whole border?

.slider {
  width: 90%;
  min-height: 15vw;
  background: white;
  position: relative;
  float: left;
  display: block;
  border-style: solid;
  border-width: 0.3vw;
  border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);
  margin-left: 5%;
  margin-bottom: 2.5%;
  margin-top: -27.5%;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px #000000;
  z-index: 20;
}

.insideslider {
  width: 80%;
  margin-left: 2.5%;
  float: left;
  position: relative;
}

.slides {
  position: relative;
  float: left;
  display: inline;
  width: 30%;
  margin-left: 3%;
  margin-top: 3.5%;
}

#slide1 {
  margin-left: 1.5%;
}

#slide2 {}

#slide3 {} 

.leftarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
}

.rightarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  transform: rotate(180deg);
}

<div class="slider">

  <img class="leftarrow" src="images/rewind.png" />

  <div class="insideslider">
    <img class="slides" id="slide1" src="images/aandrijvingen.png" />

    <img class="slides" id="slide2" src="images/electronicrepair.png" />

    <img class="slides" id="slide3" src="images/retrofit.png" />

  </div>

  <img class="rightarrow" src="images/rewind.png" />

</div>

Answer 1

You need to set border-image-slice property for the border image to appear properly instead of just on 4 corners. Initial value for this property is 100% and as explained in this answer, only the corners will get the border image when the sum of left + right (or) top + bottom offsets is greater than the width or height of the image respectively.

In the below snippet I've set the value to 1 (an unitless value is assumed to be 1px). When gradients are used the dimensions of the image is equal to the dimensions of the container box and so setting a vaue of 1px for border-image-slice would mean that sum of left and right (or top and bottom) offsets would very rarely be more than the dimensions of the image.

Note: border-image will not respect border-radius property and it will appear as rectangle/square only. Below is the extract from the W3C Specs (linked above).

A box's backgrounds, but not its border-image, are clipped to the appropriate curve...

.slider {
  width: 90%;
  min-height: 15vw;
  background: white;
  position: relative;
  float: left;
  display: block;
  border-style: solid;
  border-width: 0.3vw;
  border-image: linear-gradient(-180deg, #2D6BD0 0%, red 100%);
  border-image-slice: 1;
  margin-left: 5%;
  margin-bottom: 2.5%;
 /* margin-top: -27.5%;*/
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px #000000;
  z-index: 20;
}

.insideslider {
  width: 80%;
  margin-left: 2.5%;
  float: left;
  position: relative;
}

.slides {
  position: relative;
  float: left;
  display: inline;
  width: 30%;
  margin-left: 3%;
  margin-top: 3.5%;
}

#slide1 {
  margin-left: 1.5%;
}

#slide2 {}

#slide3 {} 

.leftarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
}

.rightarrow {
  margin-top: 5vw;
  width: 5%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  transform: rotate(180deg);
}

<div class="slider">

  <img class="leftarrow" src="images/rewind.png" />

  <div class="insideslider">
    <img class="slides" id="slide1" src="images/aandrijvingen.png" />

    <img class="slides" id="slide2" src="images/electronicrepair.png" />

    <img class="slides" id="slide3" src="images/retrofit.png" />

  </div>

  <img class="rightarrow" src="images/rewind.png" />

</div>