Creating Folded Corners with CSS corner-shape: A Step-by-Step Guide

By

CSS corner-shape is a modern property that gives developers more control over how corners are styled. While clip-path has been a popular method for folded corners, corner-shape offers a simpler, more intuitive approach. This guide walks through the process of creating a realistic folded corner effect using CSS variables, border-radius, and the bevel value of corner-shape. All examples are supported in Chrome, with graceful degradation to rounded corners in other browsers. Let's dive in with six key questions and answers.

What is corner-shape and how does it differ from border-radius?

corner-shape is a CSS property that defines the shape of corners when used alongside border-radius. While border-radius sets the curvature magnitude (using x and y coordinates), corner-shape determines the type of curve or corner. The default value is round, which creates the typical rounded corners. However, by setting corner-shape to bevel, you instruct the browser to draw a straight line between the two coordinate points, effectively creating a flat, angled cut rather than a curve. This is the foundation for creating a folded corner effect. The key difference is that border-radius alone always produces rounded edges; corner-shape gives you the ability to switch to a bevel or even a scoop shape.

How do CSS variables help in this technique?

CSS variables (custom properties) are essential for maintaining consistency and enabling animation. In this folded corner technique, we store the x-axis and y-axis coordinate values for the fold as variables. For example, --x-coord: 9rem; and --y-coord: 5rem;. These values are reused in multiple places: they set the border-top-right-radius, define the dimensions of the pseudo-element that creates the fold flap, and influence the blur radius of a box-shadow for a realistic lighting effect. Using variables makes the code cleaner and allows you to adjust the fold size globally or animate it by changing the variable values with CSS transitions or scroll-driven animations. Without variables, you would have to update each property individually, increasing the risk of errors and making maintenance harder.

What is the role of corner-top-right-shape: bevel in creating the fold?

The property corner-top-right-shape: bevel is what transforms a rounded corner into a flat, angled fold. After setting border-top-right-radius: var(--x-coord) var(--y-coord) to define the coordinate points on the top-right corner, applying bevel to that corner's shape makes the browser draw a straight line between the two points instead of a curve. This creates a diagonal edge that mimics a paper fold. The result is a sharp, angular cutout of the corner, leaving a clean triangular gap. This is the core geometric operation that simulates the physical act of folding a corner. Without this step, the corner would remain rounded, which would not look like a fold. The beauty of corner-shape is that you can apply it per-corner using longhand properties like corner-top-left-shape.

How do you create the flip side (flap) of the fold?

Once the corner is beveled, you need a flap that appears to fold over onto the element. This is done using the ::before pseudo-element. First, set content: "" to generate an empty inline element. Give it background: inherit so it matches the element's background color. The width and height of this pseudo-element are set to the same values as the coordinates: width: var(--x-coord); height: var(--y-coord). This makes the flap exactly the size of the cutout area. To position it correctly, you'll need position: absolute or relative and place it at the top-right corner (e.g., top: 0; right: 0). A box-shadow with a blur radius derived from the coordinate variables (e.g., calc(var(--x-coord) * 0.2)) adds depth and realism. The flap creates the illusion that the corner has been physically folded over, revealing the underside.

How does this compare with the clip-path method for folded corners?

The clip-path method, popularized by Kitty Giraudel, uses a polygon clipping path to cut out a triangular corner from the element, then uses a pseudo-element to fill that triangle with a different background (simulating the fold). While effective, it can be more complex to set up because you must manually define the clipping path coordinates. The corner-shape method is simpler: you only need to set border-radius coordinates and change the shape to bevel. The browser handles the geometry. Additionally, clip-path can interfere with other visual effects like border-radius on other corners, whereas corner-shape works seamlessly with standard border-radius. However, clip-path has wider browser support at the moment. The corner-shape approach is cleaner and more semantic but is currently only fully supported in Chrome (as of early 2025).

What are some practical tips for using corner-shape in production?

First, always provide a fallback for browsers that don't support corner-shape. Since unsupported browsers will ignore the property, the corner will default to round (if border-radius is set). That's acceptable—your element will just have rounded corners instead of folded ones. To enhance the fold effect, use CSS variables for the coordinate values so you can easily adjust the fold size responsively or with media queries. Consider adding a subtle box-shadow on the flap to simulate a shadow where the fold lifts off the surface. You can also animate the fold by transitioning the variable values; for example, on hover, increase the fold size. Finally, test thoroughly in Chrome since that's where corner-shape works. For other browsers, consider using the clip-path method as a progressive enhancement or a polyfill.