UBO + Syncfusion Radius and Borders

This page documents the border radius and border scale currently present in the generated Syncfusion Tailwind theme plus UBO local overrides.

Source snapshot: packages/tailwind-config/compatibility/tailwind.css and packages/ubo-react-components/src/styles/ubo-syncfusion-tailwind.css.

Radius Scale (Observed)

Token-like step Radius value Where it appears in current theme
None 0 Flat joins, segmented controls, tab/link states where corners are removed.
XS 2px Badges/chips and tighter compact shape variants.
SM 4px Most controls by default (buttons, cards, input wrappers, tooltips).
MD 6px Some switches/interactive wrappers and medium soft corners.
LG 8px Dialog-like or elevated container variants in component themes.
Pill-ish 9px, 10px, 12px Toggle/switch handles, chips, compact pill controls, rounded capsules.
Circle 50% Round buttons, avatars, and circular indicators.

Border Width Scale (Observed)

Width Usage in current styles Typical selectors
0 Reset borders or remove side borders in control internals. border: 0, border-width: 0
0.5px Hairline separators and subtle edge treatments. border: 0.5px solid ...
1px Primary standard border width for most controls. border: 1px solid ...
2px Emphasis borders (e.g. branded tooltip or stronger outline treatment). border: 2px solid ...

Common Border Colors In Use

Color Hex / variable Intent in current theme
Neutral 200 #e5e7eb Default neutral control outline and separators.
Neutral 300 #d1d5db Input/button neutral borders for normal state.
Brand primary (Syncfusion generated) #3e4760 Primary action border and focus ring framing color.
Brand primary (UBO override) var(--color-brand-600) App-level overrides for branded controls/tooltips.
Status borders #15803d, #dc2626, #0e7490, #c2410c Success, danger, info, and warning intent components.

Concrete Selector Examples

Selector Defined shape/border Where it helps
.e-btn border: 1px solid, border-radius: 4px Button baseline shape and stroke.
.e-btn.e-round border-radius: 50% Circular icon button profile.
.e-avatar / .e-avatar-circle border-radius: 4px default, 50% circle Avatar square/circle variants.
.ubo-tooltip.e-tooltip-wrap border: 2px solid var(--color-brand-600), border-radius: 4px Branded tooltip emphasis.
.e-btn.ubo-secondary border: 1px solid var(--color-brand-200) Soft outlined secondary button tone.
.e-btn.e-primary (UBO override) border: var(--color-brand-600) Aligns primary action border with brand tone.

Recommended Team Usage