CSS border-image gradient on one side?

Question

The following CSS produces a gradient border on the left & right side of an element:

div {
    width: 100px;
    height: 100px;
    border-left: 10px solid;
    border-image: linear-gradient(#00f,#000) 0 100%;
}

<div></div>

http://jsfiddle.net/5p8cv5t9/

How can I apply the gradient only to the left side?

Answer 1

You can define no border width on all other sides easily. The issue stems from the fact that the default border-width (MDN) value is medium, not 0.

div {
    width: 100px;
    height: 100px;
    border-width: 0;
    border-left: 10px solid;
    border-image: linear-gradient(#00f, #000) 0 100%;
}

<div></div>

Answer 2

you can define right border to 0px. Hope this helps.

div {
  width: 100px;
  height: 100px;
  border-left: 10px solid;
  border-right: 0px;
  border-image: linear-gradient(#00f,#000) 0 100%;
}