Create linear gradient border for top and bottom edges only? - html

Question

With the code below, I can only generate a linear-gradient border-image for the element's bottom edge. How can I modify the code to make one for its top as well?
div {
/* gradient shining border */
border-style: solid;
border-width: 3px;
-webkit-border-image: -webkit-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
-moz-border-image: -moz-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
-o-border-image: -o-linear-gradient(
left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
border-image: linear-gradient(
to left,
rgba(0,0,0,1) 1%,
rgba(0,255,255,1) 50%,
rgba(0,0,0,1) 100%
) 0 0 100% 0/0 0 3px 0 stretch;
}
Current Output:

Answer 1

You are using the shorthand border-image property for setting the size of the gradient and according to the values provided, the top, left and right borders are nullified.
Setting 100% as width of the border gradient on top and 3px as its height would result in the gradient getting applied only on top and bottom.
border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%)
100% 0 100% 0/3px 0 3px 0 stretch;
In the above lines of code, the 100% 0 100% 0/3px 0 3px 0 represents the size of the gradient border on each side (read as [top] [right] [bottom] [left]). Originally it was 0 0 100% 0/0 0 3px 0.
div {
/* gradient shining border */
border-style: solid;
border-width: 3px;
border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%)
100% 0 100% 0/3px 0 3px 0 stretch;
/* other demo stuff */
height: 50px;
line-height: 50px;
background-color: #222;
color: white;
text-align: center;
}
<div>Some content</div>
Note that border-image property still has pretty low browser support and would not work if you need to support IE10 and lower. Instead of it, you could use background-image like in the below snippet to produce a similar effect though. This works in IE10 also (but still wouldn't work in IE9- because they do not support gradients at all).
div {
/* gradient shining border */
background-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%);
background-size: 100% 3px;
background-position: 0% 0%, 0% 100%;
background-repeat: no-repeat;
/* other demo stuff */
height: 50px;
line-height: 50px;
background-color: #222;
color: white;
text-align: center;
}
<div>Some content</div>

Answer 2

This should work:
...
border-style: solid;
border-width: 3px;
border-image: linear-gradient(90deg,
rgba(0, 0, 0, 0),
rgba(0, 255, 255, 1),
rgba(0, 0, 0, 0))
1 0;
The border-image is shorthand for:
border-image-source: #;
border-image-slice: #;
border-image-width: #;
border-image-outset: #;
border-image-repeat: #;
More about this you can find in border-image MDN.