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

user_9936892 0
Viewed 183

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

gradient border css
2 Answers

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>

user_71006280

Please try below code:

#lftGrad{

width:200px;height:200px;border-left:10px solid #ccc;background:#ddd;
border-image:gradient(linear, left top, left bottom, from(#ff00ff), to(#ffff00)) 0 10 0 10 repeat repeat;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#ff00ff), to(#ffff00)) 0 10 0 10 repeat repeat;


}
<div id="lftGrad"></div>

user_30945460
Related