CODEWITHSUNDEEP
htmlcss
Daniel Vilas-Boas
Daniel Vilas-Boas

Reputation: 896

How to add gradient border only to the top and bottom of a div

I'm looking for a way to add a gradient border (from black to grey) only to my top and bottom borders and none to the edges.

Is there any simple way?

Upvotes: 3

Views: 4611

Answers (1)

user4717311
user4717311

Reputation: 

border-top: 10px solid red;
border-bottom: 10px solid red;
border-left-width: 0;
border-right-width: 0;
border-image: linear-gradient(to right, red, violet) 1 stretch;

border-right-width and border-left-width are required for Chrome and Safari.

Upvotes: 6

Related Questions