designsystem-405632-border.md
The DevExpress Design System defines standard scales for corner radius and border width values. Fixed incremental steps ensure consistent corner rounding and stroke weights across all components.
Important
Applicable to DevExpress Blazor suite only.
Border radius and width scales correspond to base CSS variables shared by all DevExpress themes (no theme-level overrides). The following tables list these CSS variables and associated values:
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-border-radius-0 | 0rem | |
--dxds-border-radius-10 | 0.0625rem | |
--dxds-border-radius-20 | 0.125rem | |
--dxds-border-radius-30 | 0.1875rem | |
--dxds-border-radius-40 | 0.25rem | |
--dxds-border-radius-50 | 0.3125rem | |
--dxds-border-radius-60 | 0.375rem | |
--dxds-border-radius-80 | 0.5rem | |
--dxds-border-radius-120 | 0.75rem | |
--dxds-border-radius-160 | 1rem | |
--dxds-border-radius-full | 62rem |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-border-width-0 | 0rem | |
--dxds-border-width-10 | 0.0625rem | |
--dxds-border-width-20 | 0.125rem | |
--dxds-border-width-30 | 0.1875rem | |
--dxds-border-width-40 | 0.25rem |
Border colors are defined by semantic CSS variables (variable values depend on the theme and its color mode). Refer to the following articles for additional information: