Using CSS corner-shape For Folded Corners

I came across Kitty Giraudel’s folded corners technique . It leverages CSS clip-path , and I thought that that was such a cool way to do it. clip-path has been trending lately, most likely because web browsers support the shape() function now. However, I’ve been on a bit of a corner-shape kick lately (have a look at my introduction to corner-shape as well as these scroll-driven corner-shape animations ), so I figured that corner-shape could be used to create folded corners as well, and this is what I came up with: CodePen Embed Fallback So open Chrome, which supports corner-shape , and let’s dig in (if you’re looking at this in other browsers, it basically falls back to a rounded corner). Step 1: Set some CSS variables Elements have four corners, but when we use border-radius , each corner is split into two coordinates. The x-axis coordinate moves along the x-axis, away from its associated corner, while the y-axis coordinate does the same thing along the y-axis. It’s from these coordinates that border-radius draws the curvature of the rounded corners. First, store the coordinates as CSS variables. We’ll need the values that they hold more than once, so this simplifies things, makes the fold animatable, and maintains some degree of realism. :root { /* x-axis coordinate */ --x-coord: 9rem; /* y-axis coordinate */ --y-coord: 5rem; } Step 2: Establishing the fold Given what we now know about border-radius , it should be obvious what border-top-right-radius does. As for corner-top-right-shape: bevel , that ensures that a straight line is drawn between the coordinates instead of rounded corners ( corner-top-right-shape: round ). That’s right, border-radius includes corner-shape: round by default (behind the scenes, of course). /* Square */ div { /* Place coordinates */ border-top-right-radius: var(--x-coord) var(--y-coord); /* Draw line between coordinates */ corner-top-right-shape: bevel; } CodePen Embed Fallback Step 3: Creating the flip side Now that we’ve established