How to Create Folded Corners with CSS corner-shape

Introduction

Folded corners are a classic design trick that adds a tactile, paper-like feel to web elements. While clip-path is the usual go-to, the newer corner-shape property offers a simpler, more semantic alternative. This guide walks you through creating realistic folded corners using border-radius and corner-shape, supported natively in Chrome. No JavaScript, no extra markup—just clean CSS.

How to Create Folded Corners with CSS corner-shape — Source: css-tricks.com

What You Need

A text editor (VS Code, Sublime, etc.)
Google Chrome (or any browser that supports corner-shape)
Basic understanding of CSS (variables, pseudo-elements, positioning)
A simple HTML document with a <div> to style

Step-by-Step Guide

Step 1: Set Up the HTML and CSS Variables

Start with an empty <div> in your HTML. In CSS, we define two custom properties that will control the fold’s size. These variables store the x-axis and y-axis coordinates—essentially the horizontal and vertical distances from the corner where the fold begins.

:root {
  --x-coord: 9rem;  /* horizontal fold depth */
  --y-coord: 5rem;  /* vertical fold depth */
}

div {
  width: 300px;
  height: 200px;
  background: #ff6b6b;
}

Using variables makes the fold easy to adjust and animate later. Note that each corner has two coordinates (like border-radius), and corner-shape determines how the line connects them.

Step 2: Create the Fold with border-radius and corner-shape

border-top-right-radius places the two coordinates at the top-right corner. By default, corner-shape is round, which draws a curved line. To get a sharp fold, we override it to bevel—this draws a straight diagonal line between the two points.

div {
  /* Apply coordinates to the top-right corner */
  border-top-right-radius: var(--x-coord) var(--y-coord);

  /* Draw a straight line instead of a curve */
  corner-top-right-shape: bevel;
}

Now the original element looks like a square with its top-right corner sliced off diagonally. This is the base of the fold.

Step 3: Add the Flip Side Using ::before

The folded corner needs a visible “flap” that mimics the underside of the paper. Use a ::before pseudo-element with content: "" to generate an empty box. Inherit the background from the parent, and set its width and height equal to the coordinates.

div {
  position: relative; /* needed for absolute positioning */
}

div::before {
  content: "";
  background: inherit;
  width: var(--x-coord);
  height: var(--y-coord);
  position: absolute;
  top: 0;
  right: 0;
  /* Flip the flap to create the folded look */
  transform: scaleY(-1);
  transform-origin: top right;
}

By placing the pseudo-element at the top-right corner and flipping it vertically (scaleY(-1)), we create a mirror image that looks like the paper has been folded over. The transform-origin ensures it flips from the correct point.

Step 4: Add Depth with box-shadow

A realistic fold often casts a subtle shadow. Add a box-shadow to the pseudo-element, scaling the blur radius relative to the variables so it stays proportional.

div::before {
  box-shadow: 0 0 calc(var(--x-coord) * 0.1 + var(--y-coord) * 0.1) rgba(0,0,0,0.15);
}

This creates a soft shadow that makes the flap feel three-dimensional. Adjust the multiplier to your taste.

Step 5: Fine-Tune Positioning and Appearance

You may notice the flap doesn’t align perfectly with the bevel cut. Use clip-path on the pseudo-element to match the exact fold line:

div::before {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

This clips the flap into a triangle that only covers the folded area. Now the background of the flap matches the parent, and the fold appears seamless.

Step 6: Make It Responsive and Animatable

Because we used CSS variables, you can change the fold size on smaller screens or animate it on hover.

@media (max-width: 600px) {
  :root {
    --x-coord: 4rem;
    --y-coord: 2rem;
  }
}

div:hover {
  --x-coord: 12rem;
  --y-coord: 6rem;
  transition: --x-coord 0.3s, --y-coord 0.3s;
}

Note: Custom property transitions work in Chrome; other browsers may ignore them gracefully.

Tips for Best Results

Use relative units like rem or % for coordinates so the fold scales with the element.
Test in Chrome first—only Chrome (Can I Use) supports corner-shape as of 2025.
Combine with other corners using corner-*-shape to create multiple folded corners on the same element.
Fallback gracefully by setting a standard border-radius before the corner-shape property, so non-Chrome browsers still get rounded corners.
Use a gradient on the pseudo-element to simulate lighting on the flap for extra realism.
Keep coordinates reasonable—very large folds (e.g., 50% of the element) can look unnatural.

Now you have a clean, CSS-only folded corner that works beautifully in supporting browsers. Experiment with different angles, shadows, and even animation to bring your designs to life.

Tags: