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

1 answer

  • answered 2018-07-12 09:06 Aravind S

    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>