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>

score 2 · Accepted Answer · edited May 23 '17 at 10:32

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>

You're welcome @Pieter. I've also added an explanation into the answer so that you can understand it more clearly. — Harry, Nov 26 '16 at 11:17
**Note:** To anybody who is interested to know why I posted a separate answer (when the answer linked in my answer looks almost the same) - It is because the questions have subtle differences, that old one asks why it doesn't work when `border-image-slice` is set (and exceeds a threshold) whereas this asks why it doesn't work in general (and has no slice specified). Plus, images have intrinsic dimensions which are used to determine the size whereas gradient's don't. Both together are the reasons and I think my actions are justified. If community thinks otherwise, I am ok with a dupe closure. — Harry, Nov 26 '16 at 11:28

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

1 Answers1