I'm building a website, and I'd like to code some wavy sine borders for my boxed. It has to be resizable.
See image example
I've tried something with border-image, but Safari doesn't support this feature correctly. Look at this :
.wavy-border {
border: 2px solid green;
border-image-source: url('wavy-stroke.svg');
border-image-repeat: round;
border-image-width: 15px;
border-image-slice: 31.22362% 34.81222%;
}
Even with a PNG, Safari resizes it bad, Chrome sometimes displays it bad too.
If you got a trick or a JS snippet, that would be awesome. Thank you !