# Corner Radius

## Essence

Approved rounded-corner scale and continuous iOS-like corner geometry for the Portfolio Design System.

## Hook

Use whenever a component, control, surface, card, or preview needs rounded corners.

## Internal Rules

- Use only approved radius tokens.
- `--radius-sm: 0.5rem / 8px`.
- `--radius-md: 0.75rem / 12px`.
- `--radius-lg: 1rem / 16px`.
- `--corner-shape: squircle` supplies the continuous iOS-like curve.
- Standard `border-radius` remains the browser fallback.
- Do not add one-off radius values without an explicit Design System decision.
- Components consume this token; Corner Radius is not a component prop.

## Use When

- Rounding interactive controls.
- Rounding cards or contained surfaces.
- Rounding preview and token samples.

## Do Not Use When

- The shape is intentionally square.
- A pill or fully circular geometry is required by a separate component contract.
- A local radius would bypass the approved scale.

## Edge Cases

- Browsers without `corner-shape` support render the approved `border-radius` fallback.
- Circles and pills should keep intrinsic geometry rather than using the large token as an approximation.
- If a component needs a different radius, ask before adding a token or exception.

## Accessibility Notes

- Corner geometry must not reduce target size or clip focus states.
- Rounded containers must preserve readable content and visible boundaries.

## Related Components And Patterns

- All rounded Design System controls and surfaces consume these tokens.
- Focus & Interaction States owns focus rendering, not corner geometry.
- Spacing owns padding around rounded shapes.

## Code Paths

- `packages/design-system/src/styles/tokens.css`
- `apps/portfolio-site/src/pages/design-system/index.astro`