Button corner

One radius for every button on the site — the header call-to-action, the Button block, and every form button.

Appearance → Customize → Style → Button border radius. A slider, from square to pill. Default Square.

The stops

0 (Square) · 2px · 4px · 6px · 8px · 12px · 16px · 24px · 999px (Pill)

It is a slider rather than a dropdown because a radius is judged by looking at it. Drag with the preview open.

What it covers

Every button the theme draws, from one value:

  • The header button
  • The core Button block in your content
  • The search button, the comment submit button, and every other form button

One token, so they cannot drift apart. A site whose header button is a pill and whose comment button is square looks like two sites.

Choosing

Square the default. Editorial, serious, and the right answer for most news sites
2–6px barely rounded. Softens the edge without announcing itself; the safe middle
8–16px visibly rounded. Reads as an app or a product site
24px, Pill a marketing button. Fine on a Subscribe, out of place on a form

The rule of thumb that holds: match the radius to your images. If your thumbnails are square-cornered — and in Stoat they are — square or near-square buttons agree with them.

Not covered

Inputs, images, and the thumbnail figures keep their own corners. If you want those rounded too, Additional CSS:

.entry-thumbnail img,
.search-field { border-radius: 6px; }

Last updated September 13, 2026

Something missing or out of date? Ask us and we will fix the page.