{"id":393431,"date":"2026-05-08T07:54:10","date_gmt":"2026-05-08T13:54:10","guid":{"rendered":"https:\/\/css-tricks.com\/?p=393431"},"modified":"2026-05-08T07:55:17","modified_gmt":"2026-05-08T13:55:17","slug":"using-css-corner-shape-for-folded-corners","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-css-corner-shape-for-folded-corners\/","title":{"rendered":"Using CSS\u00a0corner-shape\u00a0For Folded Corners"},"content":{"rendered":"\n

I came across Kitty Giraudel\u2019s folded corners technique<\/a>. It leverages CSS clip-path<\/code>, and I thought that that was such a cool way to do it. clip-path<\/code> has been trending lately, most likely because web browsers support the shape()<\/code><\/a> function now.<\/p>\n\n\n\n

However, I\u2019ve been on a bit of a corner-shape<\/code> kick lately (have a look at my introduction to corner-shape<\/code><\/a> as well as these scroll-driven corner-shape<\/code> animations<\/a>), so I figured that corner-shape<\/code> could be used to create folded corners as well, and this is what I came up with:<\/p>\n\n\n\n\n\n\n\n