# Inconsistent Border Radius

**SHOULD** · **ID:** `design-rams-border-radius` · **Category:** design
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-rams-border-radius

> SHOULD: Apply consistent border-radius values from a defined scale. Nested elements should have proportionally smaller radii (outer - border-width = inner).

Use consistent border radius values across components

The upstream rule is that one bullet under "Components" (design-rams-shadow-consistency covers its shadow half); the explanation is ours. Radius is a material property: a product where every surface is cut the same way reads as one object, and a card at 4px next to a card at 12px reads as two products glued together. Define radius tokens and hand them out by role — controls one value, containers another, pills fully round — rather than choosing per component. When one rounded box sits inside another, keep the curves concentric: child radius ≤ parent radius, ideally parent minus the padding (see design-nested-radii).

## Bad — do not do this

`design-rams-border-radius-bad`

```tsx
export function RamsBorderRadiusBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Inconsistent Border Radius</h4>
        <div className="space-y-3 p-4 bg-muted rounded-lg">
          <div className="p-4 bg-background border border-border rounded-none">
            <p className="text-sm mb-3">Sharp card (0px)</p>
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="Very round input"
                className="flex-1 px-3 py-2 border border-border rounded-2xl bg-background text-sm"
              />
              <button className="px-4 py-2 bg-primary text-primary-foreground rounded-sm text-sm">
                Tiny radius
              </button>
            </div>
          </div>
          <div className="flex gap-2 items-center">
            <span className="px-3 py-1 bg-primary text-primary-foreground rounded-lg text-xs">
              Large badge
            </span>
            <div className="w-8 h-8 bg-primary rounded-md" />
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code className="text-error">rounded-none, rounded-2xl, rounded-sm - chaos</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Random radii - sharp corners next to very rounded
      </p>
    </div>
  );
}
```

## Good — do this

`design-rams-border-radius-good`

```tsx
export function RamsBorderRadiusGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Consistent Border Radius</h4>
        <div className="space-y-3 p-4 bg-muted rounded-lg">
          <div className="p-4 bg-background border border-border rounded-lg">
            <p className="text-sm mb-3">Card with rounded-lg (8px)</p>
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="Input (6px)"
                className="flex-1 px-3 py-2 border border-border rounded-md bg-background text-sm"
              />
              <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
                Button
              </button>
            </div>
          </div>
          <div className="flex gap-2 items-center">
            <span className="px-3 py-1 bg-primary text-primary-foreground rounded-full text-xs">
              Pill badge
            </span>
            <div className="w-8 h-8 bg-primary rounded-full" />
          </div>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code>rounded-lg (8px), rounded-md (6px), rounded-full</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Consistent radius scale creates visual harmony
      </p>
    </div>
  );
}
```

## References

- [Rams design review skill](https://rams.ai/rams.md)
- [Border Radius](https://tailwindcss.com/docs/border-radius)