CSS Houdini experimental showcase by @iamvdo
Support: Chrome/Opera/Edge with flags (paint worklet with arguments)
A quick and simple paint worklet to draw borders inside the element. Use it with arguments instead of custom properties to apply many inner borders to one element
paint(inner-border, <width>, <color>, <offset>, <angle>)
.el--1 {
background: paint(inner-border, 2px, white, 10px, 0deg),
url(https://picsum.photos/256/256?image=62);
}
.el--2 {
background: paint(inner-border, 2px, white, 10px, 0deg),
paint(inner-border, 1px, white, 14px, 0deg),
url(https://picsum.photos/256/256?image=154);
}
.el--3 {
background: paint(inner-border, 2px, black, 10px, -2deg),
paint(inner-border, 2px, black, 10px, 0deg),
paint(inner-border, 2px, black, 10px, 3deg),
url(https://picsum.photos/300/300?image=201);
}
.el--4 {
background: url(https://picsum.photos/256/256?image=14);
-webkit-mask-image: paint(inner-border, 5px, white, 10px, 0deg), linear-gradient(black, black);
-webkit-mask-composite: xor;
mask-image: paint(inner-border, 5px, white, 10px, 0deg), linear-gradient(black, black);
mask-composite: exclude;
}
.el--5 {
background: paint(inner-border, 2px, white, 10px, 0deg) #2785b8;
}
.el--6 {
background: paint(inner-border, 10px, white, 0, -10deg),
url(https://picsum.photos/256/256?image=41);
}