Search code examples
htmlcsswebkit

-webkit-border-image not applying the image

I was reading an article about -webkit-border-image and border-image

I try it but it won't show the image. Here is part of my code. Any help is much appreciated

h1
{
    border-width: 5%;
    border-image:url("images/frame.png") 25% stretch;
    -webkit-border-image:url("images/frame.png") 25% stretch;
}

Here is my h1

<h1>Border Practice</h1>
Solution

  • It could be an error with the URL I guess, check the below example, it works for me

    h1 {
    border-width: 1%;
    border-image:url("https://www.w3schools.com/cssref/border.png") 25% stretch;
    -webkit-border-image:url("https://www.w3schools.com/cssref/border.png") 25% stretch;
}
    <h1>Border Practice</h1>