Consistency
no-arbitrary-border-radius
Disallow arbitrary border-radius values; use the radius scale.
Flags `rounded-[8px]`, `rounded-tl-[1rem]`, and friends. Suggests the nearest value from your configured radius scale so corners stay on-system instead of drifting one pixel at a time as agents bolt on new components.
Behavior
- Fixable: Yes — replaces the arbitrary value with the nearest scale step.
- Suggestions: Yes — also offers the next-larger and next-smaller scale step.
Examples
Bad:
<div className="rounded-[10px]">Card</div>Good:
<div className="rounded-lg">Card</div>Related rules
consistent-border-radiusDetect inconsistent border-radius across similar components.no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.no-arbitrary-colorsDisallow arbitrary color values like bg-[#FF0000] in Tailwind classes.
Use it
Enable no-arbitrary-border-radius in your eslint.config.js:
import deslint from '@deslint/eslint-plugin';
export default [
{
plugins: { deslint },
rules: {
'deslint/no-arbitrary-border-radius': 'error',
},
},
];Found a false positive? Report it on GitHub →