I was creating a website with the trendy inverted border effects but could only find ways to do it built into Elementor using the photo widget. I wanted to do it to full containers and this is how I settled. Basically an SVG mask on a container with CSS code

Timestamps:
00:00 Intro
00:31 Demo
01:37 Tools you'll need (linked below)
01:58 Making SVG Shapes
05:00 Elementor (HTML) Structure
06:24 Copy/paste CSS code + Explaining code
09:25 Outro


Follow me on IG   / jer0d  
Follow my reels account on ig   / jer0.d  
Reach out to me at https://jer0d.com/ (still under development)

SVG Encoder URL https://yoksel.github.io/urlencoder/
SVG Exporter for Figma https://www.figma.com/community/plugi...

Code to copypaste (replace with your encoded SVG & aspect ratio)
selector {
aspectratio: 858 / 510;
backgroundcolor: tomato;
maskimage: url("/* Insert your converted svg data here */");
webkitmaskimage: url("/* and also here */");
maskrepeat: norepeat;
webkitmaskrepeat: norepeat;
masksize: 100% auto;
webkitmasksize: 100% auto;
/* masksize: contain; */
/* webkitmasksize: contain; */
}