Shape button corners with a squircle

Google Chrome became the first browser to ship native support for corner-shape: squircle; in August 2025, starting with Chrome 139. The stable release arrived on August 5, 2025. Read the Chrome release notes.

Rounded

Squircle

Both shapes use a 32px radius. Your browser supports squircles.Your browser shows the rounded fallback.

Snippet not saved. No bookmark.

A squircle sits between a square and a circle. Its corners stay fuller than ordinary rounded corners at the same radius. CSS now has a native way to draw them: corner-shape: squircle. Pair it with border-radius, which sets the size of the corner region. With a zero radius, there is no corner to reshape.

css

.squircle {
  border-radius: 20px;
  corner-shape: squircle;
}

Start with a rounded button, then increase the radius inside @supports for the squircle version. Browsers without corner-shape keep the rounded fallback. The shape changes only the appearance: keep a native button, a visible keyboard focus outline, and an accessible name for icon-only controls.

css

.squircle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@supports (corner-shape: squircle) {
  .squircle-button {
    border-radius: 20px;
    corner-shape: squircle;
  }
}

.squircle-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.squircle-button--icon {
  width: 44px;
  padding: 0;
}

Use the same corner treatment for a text button or an icon button. Give a bookmark toggle a stable label and expose its state with aria-pressed, as in the working examples below.

html

<button type="button" class="squircle-button">
  Save snippet
</button>

<button
  type="button"
  class="squircle-button squircle-button--icon"
  aria-label="Bookmark snippet"
  aria-pressed="false"
>
  <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">
    <path d="M6 4h12v17l-6-4-6 4Z" fill="none"
      stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
  </svg>
</button>