CSS gradient on one side?

Question

The following CSS creates a gradient border on the left and right sides of the element:

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

<div></div>

Run codeHide result

http://jsfiddle.net/5p8cv5t9/

How to apply a gradient only to the left side?

Answer 1

You can easily determine the border width on all other sides. The problem is that the value of border-width (MDN) is the default 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>

Run codeHide result

Answer 2

you can define the 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%;
}