Using CSS corner-shape for Folded Corners

Using CSS corner-shape For Folded Corners

Daniel Schwarz demonstrates a technique for creating folded corners using the CSS corner-shape property. By setting corner-shape to bevel, developers can draw straight lines between border-radius coordinates instead of standard curves. This method currently requires Chrome for full support while other browsers fall back to rounded corners.

Why This Matters

While clip-path remains the more versatile and cross-browser compatible method for complex shaping, the corner-shape approach offers a more declarative and maintainable syntax for specific geometric adjustments. The technical reality is that border-radius implicitly uses corner-shape: round, and exposing the bevel shape allows for folds without the overhead of complex coordinate mapping required by shape() or clip-path. However, the lack of Safari and Firefox support necessitates a dual-strategy approach for production environments.

Key Insights

• The border-radius property defines x and y axis coordinates that corner-shape: bevel connects with a straight line (Schwarz, 2026).
• The corner-shape: round property is the default behavior that border-radius uses internally for curvature.
• Container style queries with range syntax can dynamically adjust the crease perspective based on coordinate ratios.
• Realistic fold effects are achieved by combining bevel shapes on both the parent element and an absolute-positioned ::before pseudo-element.
• The box-shadow blur radius can be calculated using CSS variables to scale naturally with the fold dimensions.

Working Examples

Complete implementation of a folded corner using CSS variables, bevel shapes, and container style queries.

:root { --x-coord: 9rem; --y-coord: 5rem; } div { border-top-right-radius: var(--x-coord) var(--y-coord); corner-top-right-shape: bevel; overflow: clip; position: relative; &::before { content: ''; background: inherit; width: var(--x-coord); height: var(--y-coord); box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050; position: absolute; inset: 0 0 auto auto; corner-bottom-left-shape: bevel; @container style(--x-coord < --y-coord) { border-bottom-left-radius: 100% calc(100% - var(--x-coord)); } @container style(--x-coord >= --y-coord) { border-bottom-left-radius: calc(100% - var(--y-coord)) 100%; } } }

Practical Applications

• Use Case: Creating dynamic UI components with animatable folds using CSS variables and min() to prevent coordinate overflow. Pitfall: Coordinates exceeding the element dimensions will break the visual realism of the fold.
• Use Case: Implementing realistic perspective folds using container style queries to adjust bottom-left border radius. Pitfall: Relying on this for critical UI elements without a clip-path fallback results in rounded corners on Firefox and Safari.

References:

• https://css-tricks.com/using-css-corner-shape-for-folded-corners/