Mastering Folded Corners with CSS corner-shape: A Q&A Guide
Folded corners have long been a popular visual effect in web design, often achieved through CSS clip-path. However, a newer CSS property—corner-shape—offers a more intuitive way to create realistic folds directly within the border system. This Q&A guide explores how to use corner-shape: bevel combined with border-radius and pseudo-elements to craft elegant folded corners. Whether you're new to the technique or want to deepen your understanding, these questions and answers will take you through the process step by step.
What is the corner-shape property and how does it help create folded corners?
The corner-shape property in CSS controls the shape of an element's corners when used alongside border-radius. By default, corners are round (corner-shape: round). Setting it to bevel makes the corner a straight diagonal line between the border-radius coordinates, which is exactly what you need for a folded look. Unlike the older clip-path method, corner-shape works within the standard border model, making it easier to animate and maintain responsive designs. For example, corner-top-right-shape: bevel will turn the top-right corner into a sharp diagonal fold, forming the foundation of the folded corner effect.
How do you set up CSS variables for a folded corner effect?
First, declare two custom properties on the :root or the target element: --x-coord and --y-coord. These represent the horizontal and vertical distances from the corner where the fold should occur. For instance, --x-coord: 9rem and --y-coord: 5rem will create a fold that goes 9rem to the left and 5rem down from the top-right corner. Using variables keeps the code maintainable and allows you to animate the fold by changing these values. They also make the pseudo-element (which will become the flipped flap) easy to size because its width and height can match the coordinates directly.
What's the role of border-radius and corner-shape in making the fold?
To create a folded corner, you need two things: define where the fold starts and end, and make the edge a straight line. border-top-right-radius: var(--x-coord) var(--y-coord) sets the point where the fold begins on the top and right edges. Then corner-top-right-shape: bevel changes the corner from a curve to a straight diagonal line connecting these two points. This diagonal is the crease of the fold. Without the bevel shape, border-radius would produce a rounded corner, which doesn't look like a paper fold. Together, these two properties give you the crisp triangular notch that forms the folded corner.
How do you create the flip side of the folded corner using ::before?
After establishing the diagonal crease, you need to show the 'underside' of the fold—the triangular flap that appears to flip up. Use the ::before pseudo-element on the same element. Set content: "" to generate an empty box. Give it background: inherit so it takes the same color or image as the parent. Position it in the top-right corner using absolute or relative positioning, then set its width and height equal to var(--x-coord) and var(--y-coord). This creates a right triangle that exactly covers the area where the corner was removed. To add depth, apply a box-shadow on the pseudo-element, scaling the blur and spread with the coordinate variables. The result is a realistic, shadowed flip visible on top of the main element.
How can you make the folded corner responsive or animatable?
Because the fold dimensions are stored as CSS custom properties (--x-coord and --y-coord), you can change them dynamically. For responsiveness, use media queries to adjust these values on smaller screens—for example, reduce them to 3rem and 2rem on mobile. For animation, use CSS transitions or keyframes on the variables. When the variables change, both the border-radius and the pseudo-element's size update smoothly, creating a morphing fold effect. The corner-shape property itself can also be animated if you toggle between bevel and round. This approach is much simpler than animating a complex clip-path polygon.
What browser support issues exist for the corner-shape technique?
As of now, the corner-shape property is a relatively new CSS feature and is only supported in Chrome (version 102+). Other browsers like Firefox and Safari do not support it yet. If you use this technique and the browser doesn't support corner-shape, the default round shape will apply, meaning the corner will be rounded instead of folded. This can serve as a graceful degradation—users will see a rounded corner instead of an exact fold. You can also provide a fallback using clip-path with a media query that checks for @supports on corner-shape: bevel. Always test your design across browsers and consider the user experience when the effect degrades.
How does this compare to the clip-path method for folded corners?
Both methods produce a similar visual, but they have distinct advantages. The clip-path technique (popularized by Kitty Giraudel) uses a polygon to cut out the corner and often requires extra elements or pseudo-elements for the flap. It works in all modern browsers but can be harder to animate and maintain, especially if you want the fold to adapt to content size. The corner-shape method is simpler because it relies on native border properties. It's more semantic and animatable, but browser support is currently limited. For projects that target only Chrome or progressive enhancement, corner-shape is the cleaner option. For wider support, clip-path remains the reliable choice.
Can you provide a complete example code snippet for a folded corner with corner-shape?
Yes, here's a self-contained example that creates a folded top-right corner using variables and a pseudo-element:
:root {
--x-coord: 9rem;
--y-coord: 5rem;
}
.folded-corner {
width: 300px;
height: 200px;
background: #3498db;
border-top-right-radius: var(--x-coord) var(--y-coord);
corner-top-right-shape: bevel;
position: relative;
}
.folded-corner::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: var(--x-coord);
height: var(--y-coord);
background: inherit;
filter: brightness(0.85); /* darken flap */
box-shadow: 0 0 calc(var(--x-coord) * 0.2) rgba(0,0,0,0.3);
pointer-events: none;
}This code creates a blue box with a folded top-right corner. The pseudo-element replicates the background and adds a shadow for depth. Adjust the variables to change the fold size.