border-radius-reverse

A css property proposal that reverses border-radius

Visual Effect:

Houdini custom-property example

.element {
  --border-radius-reverse: 4px;
}

Current Implementation

https://codepen.io/techsev/pen/dtAfB/

References:

https://stackoverflow.com/questions/4012085/invert-rounded-corner-in-css https://stackoverflow.com/questions/27504557/how-to-fill-and-stroke-the-svg-rectangle-with-corners-with-negative-radius