One property and 4 gradients to invert the corner of any element with a radius

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

Learn how to use a CSS mask to create an inverted radius corner with minimal code, without the need for extra elements or pseudo-elements, and optimized with CSS variables.

Inverted border-radius using CSS mask

<p>An explanation of this for people (like myself) unfamiliar with masking, or the math for that matter, would go a long way to helping people (still me) to learn it… 🫠</p>


<p>Intresting, the pen will only mask the bottom right image in Firefox. No problems in Safari and Chrome.
This is also a good approach but with pseudo elements: <a href="https://www.youtube.com/watch?v=khjVPkO35F0" target="_blank" rel="noopener nofollow">https://www.youtube.com/watch?v=khjVPkO35F0</a> (Kevin Powell)</p>
