Rounding everything flattens your site.

How often it shows up in 509 sites

In the November study, covering 509 sites that people measured with Slop Score under the same rules, the signal showed up on 136 of them, 27 %. Where it shows up is what makes it useful:

• On 34 of the 63 sites that scored 55 or more, 54 %.
• On 26 of the 167 that scored under 15, 16 %.
• In Slop Score's calibration corpus (33 slop sites and 20 carefully made ones), the median share of radii at 12 px or more, pills excluded, is 23 % for slop and 2 % for the rest.

Slop Score flags it when a page has at least eight boxes and seven in ten carry a radius of 12 px or more. Your result shows the share of boxes and the most common radius. 16 px means rounded-2xl, 12 means rounded-xl, 24 means rounded-3xl: Tailwind 4's defaults.

Three radii, three jobs

I'd treat the radius as part of your scale, like type sizes and spacing in a custom scale. Three values cover almost any page:

• A small one, 4 to 6 px, for small things you touch: inputs, checkboxes, chips, inline code.
• A medium one for surfaces: images, cards, panels. It can be 8 or 12 px, or 0 if the brand is sharper.
• The pill, for a single kind of element, usually buttons. Put it on tags, notices and filters too and it stops pointing at anything.

:root {
  --radius-control: 6px;  /* inputs, checkboxes, chips */
  --radius-surface: 12px; /* images, cards, panels */
  --radius-pill: 999px;   /* buttons only */
}

input, select, .chip { border-radius: var(--radius-control); }
.card, img { border-radius: var(--radius-surface); }
.btn { border-radius: var(--radius-pill); }

/* Sections and text blocks get no radius and no box */
section { border-radius: 0; }

That last line matters as much as the rest. Slop Score's rule counts boxes: a section that doesn't need a background or a border doesn't need to be a card, and every box you remove lowers the share too.

The nested corner rule

When a rounded element sits inside another, say an image inside a padded card, the inner radius has to be smaller. If both match, the inner curve looks thicker than the outer one and the edge looks swollen. The math is short: inner radius equals outer radius minus padding.

.card {
  --pad: 8px;
  padding: var(--pad);
  border-radius: var(--radius-surface);
}

.card img {
  /* 12px minus 8px of padding: 4px */
  border-radius: max(0px, calc(var(--radius-surface) - var(--pad)));
}

With 12 px outside and 8 px of padding, the image gets 4 px and the two curves run parallel. If the padding is equal to or larger than the radius, the inner one is zero.

How to ask your AI tool for it

Leave it unsaid and the model goes back to rounded-2xl on the next section it writes. Give it the three values and what to avoid:

Use only three corner radii, defined as CSS variables: --radius-control: 6px for inputs, checkboxes and chips; --radius-surface: 12px for images, cards and panels; --radius-pill: 999px for buttons only. Do not use rounded-xl, rounded-2xl or rounded-3xl. Sections and text blocks are not wrapped in cards and get no radius. When a rounded element sits inside a padded one, its radius is the outer radius minus the padding.

Then run your page through Slop Score again and check whether "Rounded corners on everything" is still there. More copy-ready instructions like this one are in the prompts guide.