CSS corner-shape: The Complete Guide to Sculpting Your Interfaces

For a long time, the Web used only one shape for corners: the circular arc. While the border-radius property is extremely useful, it is limited. It cannot create clipped right angles (bevels) or more complex shapes without external help.

The corner-shape property changes this. It allows you to choose the shape of the corner without changing its * size*. This is a performance revolution because everything is handled natively by the browser.

#Why use corner-shape?

Previously, to create a beveled corner, we used images or complex masks. These methods slow down the site. corner-shape offers three advantages:

1. Speed: The browser draws the shape directly.
2. Lightweight: Less code and no images to load.
3. Flexibility: The shape automatically adapts to the block size.

Here is an example of fluid and high-performance code:

Copy.card {
  background-color : #1a1a1a;
  border-radius    : clamp(1rem * $font-size, 5vi, 3rem * $font-size);
  corner-shape     : bevel;
  inline-size      : 100%;
  padding          : 2rem * $font-size;
}

#The Four Basic Shapes

The corner-shape property offers four simple keywords. Each keyword changes how the corner is traced.

1. Round Mode

This is the default value. The browser draws a quarter circle. This is exactly what border-radius does on its own.

2. Bevel Mode

The bevel cuts the corner with a straight line. It’s ideal for modern or industrial designs. The calculation is very simple for the Graphics Processing Unit (GPU), making the rendering instantaneous.

3. Scoop Mode

Scoop mode creates an inward curve. Imagine removing a circular piece from the corner of the block. This is very difficult to achieve without this property.

4. Notch Mode

The notch creates a stair-shaped cutout. The corner consists of two straight lines meeting inside the block.

#The Superellipse: The Secret of High-End Design

The superellipse() function is the most technical part of corner-shape. It allows for very smooth curves, often called “squircles.”

What is a Superellipse?

It is a mathematical shape between a square and a circle. Unlike a circle, the curve starts very gently. There is no visible break between the straight line and the start of the corner. Apple uses this shape extensively for its icons and products.

Copy.premium-box {
  aspect-ratio  : 1 / 1;
  border-radius : 20%;
  corner-shape  : superellipse(2.5);
  inline-size   : min(20rem * $font-size, 80vi);
}

In this code, the number 2.5 is the mathematical exponent.

• If the number is 2, it’s a perfect circle.
• As the number increases, the corner becomes “fuller” and approaches a square.

#How the Browser Renders These Shapes

To ensure maximum performance, it is important to understand what happens inside the browser.

The Rendering Pipeline

When you use corner-shape, the browser follows these steps:

1. Layout Calculation: It defines the block size (the rectangle).
2. Painting Phase: It draws the border with the chosen shape.

The advantage of corner-shape is that it does not affect the layout stage. The block remains the same size regardless of the corner shape. This prevents the browser from recalculating positions if the shape changes, for example, during a hover effect.

Hardware Acceleration

Tracing shapes like bevels or superellipses is sent directly to the GPU. The GPU is designed to draw vectors very quickly. This is much more efficient than using JavaScript filters or masks.

#Accessibility and Visual Comfort

Good code must be readable by everyone, including assistive tools.

Focus Indicators

A major problem with old techniques was that the selection ring (when using the Tab key) remained rectangular. With corner-shape, the browser adapts the focus ring to the shape of the corner.

Copy.interactive-element:focus-visible {
  outline        : .2rem * $font-size solid #4a90e2;
  outline-offset : .4rem * $font-size;
}

Fluid Units

We use rem and the $font-size variable so that the corners adapt to the user’s text size. If a person increases the font size in their browser to read better, the corners will remain proportional, and the interface will stay clean.

#Summary for Developers

To optimize your interface with corner-shape, remember these points:

• Use bevel for a technical look and maximum performance.
• Use superellipse for a soft, luxury look.
• Use relative units (rem) to ensure the design is accessible.
• Avoid corner images to save precious milliseconds during loading.

corner-shape is the perfect tool for combining complex design with incredible loading speeds. It is the future of high-performance web design.

Frequently Asked Questions (FAQ)

Lionel Péramo

Web Performance & Eco-design Expert

Full Stack Developer and creator of the OTRA framework (PHP) and EcoComposer library. I write to make the web faster and more inclusive.

About me →