csslinear-gradientsborder-image

CSS Stripes With border-image

I've been testing for a few hours but, I can't seem to get border-image to do what I want.

I'm trying to add a bottom border to a div with horizontal stripes. That is 2px grey, 2px white and 2px grey; i.e. grey and white stripes.

Like so:

enter image description here

Here's what I have so far:

.box {
  height: 50px;
  background-color: #74c5fc;
  border-style: solid;
  border-image:
      linear-gradient(
         to top, 
         #ccc 0%, 
         #ccc 33%, 
         #fff 33%, 
         #fff 66%, 
         #ccc 66%, 
         #ccc 100%
      ) 1 1 / 0 0 6px 0
    ;
}
<div class="box"></div>

What am I doing wrong?

Solution

  • Use a big slice value!

    .box {
 height:100px;
 background-color: #74c5fc;
 border-style:solid;
 border-image:
      linear-gradient(
         to top, 
         #ccc 0%, 
         #ccc 33%, 
         #fff 33%, 
         #fff 66%, 
         #ccc 66%, 
         #ccc 100%
      ) 100 /0 0 6px 0;
}
    <div class="box">

</div>

    Or you can do like this:

    .box {
 height:100px;
 padding-bottom:6px;
 background:
  linear-gradient(#fff,#fff) 0 calc(100% - 2px)/100% 2px no-repeat, 
  linear-gradient(#ccc,#ccc) bottom/100% 6px no-repeat,
  #74c5fc content-box;
}
    <div class="box">
</div>

    Or like this:

    .box {
 height:100px;
 padding-bottom:6px;
 background:
  linear-gradient(to bottom, #ccc 2px,#fff 2px,#fff 4px,#ccc 4px) bottom/100% 6px no-repeat,
  #74c5fc content-box;
}
    <div class="box">
</div>

    You can also consider box-shadow:

    .box {
 height:100px;
 margin-bottom:6px;
 box-shadow:
  0 2px 0 #ccc,
  0 4px 0 #fff,
  0 6px 0 #ccc;
 background:#74c5fc;
}
    <div class="box">

</div>