MODERN INVERTED BORDER on CONTAINERS - Elementor WordPress Flexbox Tutorial

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/url-encoder/
SVG Exporter for Figma - https://www.figma.com/community/plugi...

Code to copy-paste (replace with your encoded SVG & aspect ratio) -
selector {
aspect-ratio: 858 / 510;
background-color: tomato;
mask-image: url("/* Insert your converted svg data here */");
-webkit-mask-image: url("/* and also here */");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% auto;
-webkit-mask-size: 100% auto;
/* mask-size: contain; */
/* -webkit-mask-size: contain; */
}