Consistency

consistent-border-radius

Detect inconsistent border-radius across similar components.

Compares border-radius utilities across similar components and reports the dominant pattern as the recommended standard. Mixed radii are the visual signature of an AI-assembled UI: every individual card looks fine, the grid of them screams.

Behavior

• Fixable: No.
• Suggestions: No.

Examples

Bad:

<div className="rounded-md p-4">Card A</div>
<div className="rounded-xl p-4">Card B</div>

Good:

<div className="rounded-xl p-4">Card A</div>
<div className="rounded-xl p-4">Card B</div>

Related rules

• consistent-component-spacingDetect inconsistent spacing patterns across similar components.
• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• no-arbitrary-typographyDisallow arbitrary font-size, weight, and line-height values.

Use it

Enable consistent-border-radius in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/consistent-border-radius': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules