Creating an inverted border-radius with CSS

The other day on Twitter, [id280848710|@FlorinPop] pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way! 🔗 Links ✅ The original tweet: ✅ My finished code: ⌚ Timestamps 00:00 - Introduction 00:16 - The easiest solution? 00:30 - Setting up the layout 02:08 - The white separation 03:19 - Using a radial-gradient to make the corners 04:36 - Positioning the corner things 06:15 - Two problems with this solution #css -- Come hang out with other dev’s in my Discord Community 💬 ... #KevinPowell #Kevin_Powell #backward_border_radius #border_radius #border-radius #css #css_border-radius #css_corners #front-end #frontend 20230525 khjVPkO35F0