> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Radius > BEEQ radius defines how corners behave across components, surfaces, and custom UI built with the design system. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return

{}

{} {children &&

{children}

}

; }; 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. | Token | CSS variable | Value | | ------ | ------------------- | -------- | | `none` | `--bq-radius--none` | `0` | | `xs2` | `--bq-radius--xs2` | `2px` | | `xs` | `--bq-radius--xs` | `4px` | | `s` | `--bq-radius--s` | `8px` | | `m` | `--bq-radius--m` | `12px` | | `l` | `--bq-radius--l` | `24px` | | `full` | `--bq-radius--full` | `9999px` | body { box-sizing: border-box; padding: var(--bq-spacing-m); color: var(--bq-text--primary); background: var(--bq-background--primary); } .radius-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--bq-spacing-m); max-width: 46rem; } .radius-token { display: grid; gap: var(--bq-spacing-xs); min-block-size: 8rem; } .radius-shape { block-size: 5rem; border: var(--bq-stroke-s) solid var(--bq-stroke--primary); background: var(--bq-background--secondary); } .radius-shape--none { border-radius: var(--bq-radius--none); } .radius-shape--xs2 { border-radius: var(--bq-radius--xs2); } .radius-shape--xs { border-radius: var(--bq-radius--xs); } .radius-shape--s { border-radius: var(--bq-radius--s); } .radius-shape--m { border-radius: var(--bq-radius--m); } .radius-shape--l { border-radius: var(--bq-radius--l); } .radius-shape--full { border-radius: var(--bq-radius--full); } .radius-label { display: grid; gap: var(--bq-spacing-xs3); font-size: var(--bq-font-size--s); line-height: var(--bq-font-line-height--regular); } .radius-label span { color: var(--bq-text--secondary); }

none0

xs22px

xs4px

s8px

m12px

l24px

full9999px

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .radius-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--bq-spacing-m); } .radius-shape { block-size: 5rem; border: var(--bq-stroke-s) solid var(--bq-stroke--primary); background: var(--bq-background--secondary); } .radius-shape--none { border-radius: var(--bq-radius--none); } .radius-shape--xs2 { border-radius: var(--bq-radius--xs2); } .radius-shape--xs { border-radius: var(--bq-radius--xs); } .radius-shape--s { border-radius: var(--bq-radius--s); } .radius-shape--m { border-radius: var(--bq-radius--m); } .radius-shape--l { border-radius: var(--bq-radius--l); } .radius-shape--full { border-radius: var(--bq-radius--full); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

none0

xs22px

xs4px

s8px

m12px

l24px

full9999px

``` *** ## 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. body { box-sizing: border-box; padding: var(--bq-spacing-m); color: var(--bq-text--primary); background: var(--bq-background--primary); } .radius-code { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--bq-spacing-m); max-width: 48rem; } .radius-code bq-card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); } .radius-code .radius-card-variable { --bq-card--borderRadius: var(--bq-radius--m); } .radius-code bq-card[border="l"] { --bq-card--padding: var(--bq-spacing-m); } .radius-code bq-button { --bq-button--border-radius: var(--bq-radius--full); } .radius-code bq-alert { --bq-alert--min-width: 0; } .radius-card__label { display: block; margin-block-start: var(--bq-spacing-xs); color: var(--bq-text--secondary); font-size: var(--bq-font-size--s); }

Card prop border="l"

Card CSS variable --bq-card--borderRadius

Alert prop border="s"

Pill button

--bq-button--border-radius

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} bq-card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); } .radius-card-variable { --bq-card--borderRadius: var(--bq-radius--m); } bq-button { --bq-button--border-radius: var(--bq-radius--full); } bq-alert { --bq-alert--min-width: 0; } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Card prop border="l"

Card CSS variable --bq-card--borderRadius

Alert prop border="s"

Pill button

--bq-button--border-radius

``` *** ## 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. | Token | Use for | | ------ | ------------------------------------------------------------------------------------------- | | `none` | Square edges, dense data, or edge-to-edge regions where rounding would create visual noise. | | `xs2` | Very small shapes, icon backgrounds, and details that need slight softness. | | `xs` | Small custom elements and compact areas that should not look like cards. | | `s` | Inputs, dropdown panels, date cells, tabs, and small-to-medium component surfaces. | | `m` | Buttons, banners, snackbars, cards, and common custom panels. | | `l` | Large containers, hero panels, and prominent surfaces with enough padding. | | `full` | Circles, avatars, icon chips, status dots, and pill-shaped elements. | body { padding: var(--bq-spacing-m); } .radius-workflow-card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); } .radius-workflow-card::part(wrapper) { display: grid; gap: var(--bq-spacing-m); } .radius-card-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--bq-spacing-s); } .radius-card-copy { display: grid; gap: var(--bq-spacing-xs2); } .radius-card-title, .radius-card-description { margin: 0; } .radius-card-description { color: var(--bq-text--secondary); } .radius-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bq-spacing-s); } .radius-workflow-card bq-alert { --bq-alert--min-width: 0; }

Account setup

Use a larger card radius for the main workflow surface.

Active workflow

Step saved Use a smaller radius for compact supporting feedback.

Continue

View summary

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .radius-workflow-card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); } .radius-workflow-card::part(wrapper) { display: grid; gap: var(--bq-spacing-m); } .radius-card-header, .radius-action-row { display: flex; flex-wrap: wrap; gap: var(--bq-spacing-s); } .radius-card-header { align-items: flex-start; justify-content: space-between; } .radius-card-copy { display: grid; gap: var(--bq-spacing-xs2); } .radius-card-title, .radius-card-description { margin: 0; } .radius-card-description { color: var(--bq-text--secondary); } .radius-action-row { align-items: center; } .radius-workflow-card bq-alert { --bq-alert--min-width: 0; } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Account setup

Use a larger card radius for the main workflow surface.

Active workflow

Step saved Use a smaller radius for compact supporting feedback.

Continue

View summary

``` *** ## 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. body { padding: var(--bq-spacing-m); } .nested-radius { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--bq-spacing-m); } .nested-radius bq-card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); } .nested-radius__card::part(wrapper) { display: grid; gap: var(--bq-spacing-s); } .nested-radius__inner { --bq-card--padding: var(--bq-spacing-m); --bq-card--background: var(--bq-ui--primary); } .nested-radius__label { color: var(--bq-text--secondary); font-size: var(--bq-font-size--s); }

Balanced

Outer card border l, inner card border m.

Step nested radius down by one token.

Less balanced

Outer card border l, inner card border l.

Equal radii can make the inset feel cramped.

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .nested-radius { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--bq-spacing-m); } .nested-radius bq-card { --bq-card--borderColor: var(--bq-stroke--primary); --bq-card--borderWidth: var(--bq-stroke-s); } .nested-radius__card::part(wrapper) { display: grid; gap: var(--bq-spacing-s); } .nested-radius__inner { --bq-card--background: var(--bq-ui--primary); --bq-card--padding: var(--bq-spacing-m); } .nested-radius__label { color: var(--bq-text--secondary); font-size: var(--bq-font-size--s); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Balanced

Outer card border l, inner card border m.

Step nested radius down by one token.

Less balanced

Outer card border l, inner card border l.

Equal radii can make the inset feel cramped.

``` *** ## 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. body { padding: var(--bq-spacing-m); } .custom-radius-surface { display: grid; gap: var(--bq-spacing-s); padding: var(--bq-spacing-l); border: var(--bq-stroke-s) solid var(--bq-stroke--primary); border-radius: var(--bq-radius--l); background: var(--bq-background--secondary); } .custom-radius-surface__metric { display: inline-flex; align-items: center; justify-content: center; inline-size: 4rem; block-size: 4rem; border-radius: var(--bq-radius--full); background: var(--bq-ui--brand); color: var(--bq-text--alt); font-weight: var(--bq-font-weight--bold); }

82%

Custom dashboard tile

Use global radius variables when no BEEQ component owns the surface.

`} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .custom-radius-surface { padding: var(--bq-spacing-l); border: var(--bq-stroke-s) solid var(--bq-stroke--primary); border-radius: var(--bq-radius--l); background: var(--bq-background--secondary); } .custom-radius-surface__metric { inline-size: 4rem; block-size: 4rem; border-radius: var(--bq-radius--full); background: var(--bq-ui--brand); color: var(--bq-text--alt); } ``` ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}}

82%

Custom dashboard tile

Use global radius variables when no BEEQ component owns the surface.

``` *** ## Usage guidelines Use a component's `border` prop when it exists. That keeps the radius decision inside the component contract and lets the component set its own radius CSS variable. Choose `--bq-radius--*` values and component radius APIs instead of arbitrary pixels. If your project uses the BEEQ Tailwind preset, the matching radius utilities are available too. Use smaller values for compact controls and details. Use larger values for larger containers that have enough padding and visual weight. Use `full` for avatars, status dots, icon chips, and pill-shaped labels. Avoid `full` on rectangular cards unless the shape is intentionally pill-like. When a surface contains another surface, choose a smaller radius for the inner element. This keeps the inset relationship clear. Avoid values such as `6px`, `10px`, or `16px` unless a product-specific exception is intentional and documented. Radius can support hierarchy and grouping, but it should not be the only way to communicate state, priority, or interactivity. *** ## 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 Review the radius custom properties used by BEEQ themes. See the source that defines the BEEQ radius values.