CODEWITHSUNDEEP
htmlcssborderlinear-gradients
Jason Lam
Jason Lam

Reputation: 1392

Create linear gradient border for top and bottom edges only?

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:

enter image description here

Upvotes: 5

Views: 21843

Answers (2)

Muhammad-Ali
Muhammad-Ali

Reputation: 93

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.

Upvotes: 0

Harry
Harry

Reputation: 89750

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>

Upvotes: 17

Related Questions