Menu
I am trying to make right border of an <ul> element to be linear gradient.
I have tried following but with no success:
-webkit-border-image: -webkit-linear-gradient(top, #FE2EF7, #4AC0F2) 0 0 5px;
I am using Chrome.
Many thanks
437
The border-image property can accomplish this. You'll need to specify border-style and border-width too. border-image: linear-gradient(#f6b73c, #4d9f0c) 30; border-width: 4px; border-style: solid; Read more on MDN.
To show gradients for a border with CSS you can use the border-image property. It allows setting gradient values in the same way as the background-image property. Besides the border-image property, you should specify additional properties to actually show border gradient.
You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function).
The first linear gradient is limited to the padding box (i.e., all the content of the element, except the borders).
There is a solution for that but I'm not sure you can adjust the border width: http://jsfiddle.net/u2ZE4/1/
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#e00), to(#fff))0 100% 0 0 stretch;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
