Your graphics make it clear on how it works I think. I myself have not used border-image yet and I like your demo using gradients so perhaps soon I'll use it.
There is actually another new option as well using a new low-level Browser/CSS API called Houdini where you can control paint rendering with custom CSS:
Nice article Stephanie!
Your graphics make it clear on how it works I think. I myself have not used
border-imageyet and I like your demo using gradients so perhaps soon I'll use it.There is actually another new option as well using a new low-level Browser/CSS API called Houdini where you can control paint rendering with custom CSS:
Border Example from Google Chrome Labs Site:
Look for
border-radius-reverseon this link (and see other CSS demos):houdini.how/