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.

How to Create Folded Corners with CSS corner-shape