Linear gradient on Safari is wrapping all around

Question

I have a wordpress theme css override. I wanted to have linear gradients under the widget titles.

I used the following code:

.widget-title {
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, green 10%, orange 25%, yellow 50%,purple 50%, indigo 75%, indigo 75%) 5;
    padding-left: 0px;
    padding-right: 0px;

On chrome and firefox it underlines the title just like I want.

On Safari it creates a border all the way around the title.

Safari

Chrome

Answer 1

Try using below:

border-width: 0 3px 3px 3px;
border-top: none;