Welcome to this Q&A guide on crafting folded corners using the CSS corner-shape property. Inspired by Kitty Giraudel's clip-path technique, this approach leverages the newer corner-shape property (supported in Chrome) to simulate a paper fold effect. By combining border-radius with corner-shape: bevel and a pseudo-element, you can create realistic folded corners that are animatable and lightweight. Below, we answer common questions about the technique, step-by-step implementation, and browser considerations.
What is the CSS corner-shape property and how does it help with folded corners?
The corner-shape property defines the shape of a corner when border-radius is applied. By default, corners are rounded (value round), but you can set it to bevel, which draws a straight line between the two radius coordinates instead of a curve. This straight line is essential for creating the fold edge. For folded corners, we apply border-top-right-radius and then corner-top-right-shape: bevel to cut off the corner with a sharp diagonal line. The result is a triangular cutout that mimics the first part of a folded paper.
What CSS variables should I set up for the fold?
To make the fold maintainable and animatable, store the x and y coordinates as CSS variables. The border-radius property uses two values per corner: one along the x-axis and one along the y-axis. For folded corners, define --x-coord (e.g., 9rem) and --y-coord (e.g., 5rem). These values control where the diagonal cut begins. Using variables allows you to change the fold size globally and later animate it. Example: :root { --x-coord: 9rem; --y-coord: 5rem; }. Then apply border-top-right-radius: var(--x-coord) var(--y-coord) to place the coordinates.
How do I apply the bevel shape to create the fold?
After setting the radius coordinates, add corner-top-right-shape: bevel to the element. This instructs the browser to draw a straight line between the two coordinate points instead of a curve. The bevel cuts off the top-right corner diagonally, forming a triangular opening. Without this, the default round value would create a rounded corner. The bevel is the key to simulating the crease of a folded paper. Combine it with border-top-right-radius using the variables, and you’ll see the corner disappear along a straight line.
How do I create the flip side of the fold using ::before?
The fold needs a visible “flap” that appears to flip over. Use the ::before pseudo-element to generate this piece. Set content: "" to create an empty box, then give it background: inherit so it matches the parent element. Its width and height should equal the --x-coord and --y-coord values respectively. Position it absolutely in the top-right corner (e.g., top: 0; right: 0;). To add depth, include a box-shadow with blur radius scaled from the variables, for instance 0 0 calc(var(--x-coord) * 0.1) rgba(0,0,0,0.3). This shadow makes the flap look raised.
How can I animate the folded corner effect?
Because the coordinates are stored in CSS variables, you can animate them using @keyframes or transition. For example, change --x-coord from 9rem to 3rem on hover or with an animation. The pseudo-element’s dimensions and shadow will update automatically if they reference the variables. This creates a smooth expanding or shrinking fold. Additionally, you can rotate the pseudo-element slightly to simulate the flap opening. The technique works well with scroll-driven animations if you use animation-timeline: scroll() (supported in Chrome).
What is the browser support for corner-shape and what fallback should I use?
As of now, corner-shape is only supported in Chrome (and Chromium-based browsers) behind the corner-shape flag or enabled by default in recent versions. Other browsers like Firefox and Safari ignore the property, falling back to the default round shape. To provide a graceful fallback, keep the border-radius set without the bevel. The result will be a rounded corner instead of a folded one. You can also use a @supports (corner-shape: bevel) query to provide alternative styling for browsers that do support it, but the current approach already degrades acceptably. For production, consider using clip-path as a polyfill if you need wider support.
Can you show a complete, minimal example of the folded corner technique?
Yes. Here’s a self-contained snippet:
:root {
--x-coord: 9rem;
--y-coord: 5rem;
}
.folded {
width: 200px; height: 200px;
background: #f0c;
border-top-right-radius: var(--x-coord) var(--y-coord);
corner-top-right-shape: bevel;
position: relative;
}
.folded::before {
content: "";
position: absolute;
top: 0; right: 0;
width: var(--x-coord);
height: var(--y-coord);
background: inherit;
box-shadow: 0 0 calc(var(--x-coord) * 0.1) rgba(0,0,0,0.3);
}Place this in HTML with a <div class="folded"></div>. In Chrome, you’ll see a folded top-right corner with a shaded flap. Adjust the variables to change the fold size.