---
title: "Squircles in CSS: Using corner-shape"
description: "Learn how to create smooth superellipse and squircle corners in CSS using the experimental corner-shape property."
image: "https://mirado.work/img/css-corner-shape/image.png"
---

For a long time, web design has relied on the classic `border-radius` property to create rounded corners. While useful, a standard rounded corner is geometrically a simple circular arc that intersects abruptly with straight lines, creating a harsh transition.

Enter the **squircle** (or superellipse). Squircles feature a continuous, mathematically smooth transition between the straight edges and the corner curve, which is why companies like Apple use them for app icons, hardware designs, and user interfaces.

With the new CSS `corner-shape` property, you can finally define corner shapes on the web.

# Geometrical Differences

A standard rounded corner uses a circular arc. A squircle uses a superellipse curve ($x^n + y^n = 1$ where $n > 2$).

In CSS, the `<corner-shape-value>` data type describes how a container corner should be drawn:

- `round`: The default circular curve.
- `squircle`: A smooth superellipse transition.
- `bevel`: A flat, diagonal cut.

# CSS Implementation

The `corner-shape` property is a shorthand that controls the shape of the container corners. It is used in combination with `border-radius` to define the radius size.

```css
.card-squircle {
  border-radius: 2rem;
  corner-shape: squircle;
  /* Shorthand or specific corner: */
  /* border-top-left-radius-shape: squircle; */
}
```

By defining `corner-shape: squircle`, the browser applies a superellipse transition instead of a circular arc.

# Creating Beveled Corners

You can also use `corner-shape` to easily create beveled (cut) corners:

```css
.card-bevel {
  border-radius: 1.5rem;
  corner-shape: bevel;
}
```

This is much easier than writing complex CSS `clip-path` or using linear-gradient background hacks to create diagonal cut corners!

# Browser Support and Fallbacks

The `corner-shape` property is part of the CSS Backgrounds and Borders Module Level 4 and is currently experimental.

Because it degrades gracefully, browsers that do not support `corner-shape` will simply fall back to the standard circular `border-radius` rounded corners:

```css
.card {
  border-radius: 2rem; /* Supported everywhere */
  corner-shape: squircle; /* Smooth in supporting browsers, fallback to round otherwise */
}
```

I hope you liked this tutorial on creating custom corner shapes in CSS!

### Source

You can find out more about `<corner-shape-value>` [here.](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/corner-shape-value)

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Squircles in CSS: Using corner-shape",
  "description": "Learn how to create smooth superellipse and squircle corners in CSS using the experimental corner-shape property.",
  "image": "https://mirado.work/img/css-corner-shape/image.png",
  "datePublished": "2026-04-20T00:00:00.000Z",
  "author": {
    "@type": "Person",
    "name": "Mirado Andria",
    "url": "https://mirado.work"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mirado Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://mirado.work/me.jpg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://mirado.work/blog/css-corner-shape"
  }
}
```