CODEWITHSUNDEEP
cssbrowsersafarigradientcompatibility
Momin
Momin

Reputation: 3320

Bottom border gradient support for safari browser

Is there any way to support bottom border gradient for safari browser, only safari browser don't support this

 h2 {
    color: #606060;
    font-size: 40px;
    display: inline-block;
    position: relative;
}
 h2::after {
    content: '';
    position: absolute;
    left: 10%;
    display: inline-block;
    height: 1em;
    width: 80%;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #CA49D9, #2452A2);
    border-image-slice: 1;
    opacity: 0.6;
    margin-top: 15px;
}
<h2>How it works</h2>

Here is the safari output

enter image description here

Upvotes: 0

Views: 839

Answers (1)

Aravind S
Aravind S

Reputation: 2395

I added other border properties (left, right and top) to 0px and it worked in all browser. Here is the fiddle http://jsfiddle.net/Aravi/1da8nx5g/1/

h2 {
    color: #606060;
    font-size: 40px;
    display: inline-block;
    position: relative;
}
 h2::after {
    content: '';
    position: absolute;
    left: 10%;
    display: inline-block;
    height: 1em;
    width: 80%;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #CA49D9, #2452A2);
    border-image-slice: 1;
    opacity: 0.6;
    margin-top: 15px;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}
<h2>How it works</h2>

Upvotes: 2

Related Questions