Is it possible to make a gradient in left border only?

Question

Is it possible to make a gradient in left border alone in CSS3 and if so how? I know that we can make gradient backgrounds and there are many generators for that, but I am unable to find one that creates the code for a gradient border for left border only.

Do you have any idea on how to do this?

Best regards, Shiv

Answer 1

border-image allows you to define an image to your border, the image could be a linear-gradient()

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

MDN - border-image

---

border-image is a shorthand for all those properties:

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

Thanks to border-image-slice, you are able to apply your gradient on your left border only.

The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image.

MDN - border-image-slice

The MDN docs provide a great explanation on how to use border-image-slice, but if you want your gradient to be applied to the left only, simply add the 0 0 0 1 value to border-image-slice.

header {
  max-width: 40ch;
  padding: 1rem;
  border-width: 2px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      red, 
      transparent
    ) 0 0 0 1;
}

<header>
  Lorem ipsum dolor sit amet consectetur adipiscing elit
</header>