CSS - fading gradient border from-to - html

Question

I want to make my whole div section with fading border. Here is my code:
.usermanagement {
-webkit-border-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#fff),
to(#afd4ec),
color-stop(0.2, #afd4ec)
)
0 0 0 0 repeat repeat;
}
The effect is exactly what I want but only for top:
Then all goes to light blue and finishes like this:
Without this fading effect. I want to make the same effect as in the top for the bottom end of the section. How it is possible?

Answer 1

You can try like below. make sure to correctly set the different values.
.box {
height:50px; /* this need to be a multiple of 10 for the effect to work */
border-top: 10px solid;
border-bottom:10px solid;
background:#f2f2f2;
border-image:repeating-linear-gradient(#fff 0,red 10px) 10;
}
<div class="box"></div>
You can also do it with multiple background:
.box {
height:50px;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
background:
linear-gradient(#fff ,red ) top,
linear-gradient(#fff ,red ) bottom, /* use (red, #fff) here for the opposite effect */
#f2f2f2;
background-size:100% 10px;
background-origin:border-box;
background-repeat:no-repeat;
}
<div class="box"></div>