Radius

Radius controls how sharp or soft an interface feels. BEEQ uses a shared radius scale so components, cards, controls, badges, and custom surfaces keep a consistent shape language. BEEQ components already include their default radius. Use these tokens when you build custom UI around them, override component-level radius variables, or need a product surface to align with the rest of the system.

---

​

Radius scale

The current BEEQ radius scale is exposed as CSS custom properties. Use these variables as the stable documentation reference because they are available wherever BEEQ styles are loaded.

---

​

How radius works in code

BEEQ exposes one radius scale. Use it in this order:

1. Use a component prop such as border when the component provides one.
2. Use a component CSS variable when the component exposes one for scoped customization.
3. Use global --bq-radius--* variables when you build a custom surface.

If your application uses the BEEQ Tailwind preset, its border-radius keys map to the same variables, but CSS variables are the portable contract. Components that need radius customization expose their own API. Prefer those APIs instead of styling internal structure directly. In components like bq-card and bq-button, the border prop sets the component radius CSS variable for you.

---

​

Choosing radius

Radius should support the role and size of the element. Larger surfaces can carry larger corners because they have more space around content. Smaller controls need smaller radii so the shape does not overwhelm the content inside.

---

​

Nested radius

Nested surfaces look more balanced when the inner radius is smaller than the outer radius. The spacing between surfaces matters: the more padding between the outer and inner edge, the more room the outer surface has to use a larger radius. Use this as a practical rule: choose the outer radius first, then step the inner radius down by one token when the nested surface sits close to the edge. For example, pair l outside with m inside, or m outside with s inside.

---

​

Custom surfaces

Use global radius variables when the surface is not a BEEQ component or when the layout is outside a component’s structure. This is the right path for custom dashboards, charts, visual containers, and product-specific compositions.

---

​

Usage guidelines

---

​

Accessibility and constraints

Radius is visual, but it can still affect how usable a surface feels.

• Keep focus rings visible. Large radii and clipped containers should not hide outlines or focus indicators.
• Avoid clipping important content with overflow: hidden only to enforce rounded corners.
• Do not rely on shape alone to communicate state or meaning. Pair visual treatment with text, icons, ARIA where needed, and color tokens.
• Keep touch targets large enough when using pill-shaped controls or circular buttons.
• Check nested surfaces at small widths so rounded containers do not crowd labels, icons, or controls.

---

​

Resources