New to Kendo UI for Angular? Start a free 30-day trial
Customizing Radii
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-border-radius-none | Number | k-map-get($kendo-spacing, 0) | 0px |
Description
The none border radius used across the Components. | |||
| $kendo-border-radius-xs | Number | k-map-get($kendo-spacing, 1px) | 1px |
Description
The extra small border radius used across the Components. | |||
| $kendo-border-radius-sm | Number | k-map-get($kendo-spacing, 0.5) | 0.125rem |
Description
The small border radius used across the Components. | |||
| $kendo-border-radius-md | Number | k-map-get($kendo-spacing, 1) | 0.25rem |
Description
The medium border radius used across the Components. | |||
| $kendo-border-radius-lg | Number | k-map-get($kendo-spacing, 2) | 0.5rem |
Description
The large border radius used across the Components. | |||
| $kendo-border-radius-xl | Number | k-map-get($kendo-spacing, 3) | 0.75rem |
Description
The extra large border radius used across the Components. | |||
| $kendo-border-radius-xxl | Number | k-map-get($kendo-spacing, 4) | 1rem |
Description
The third largest border radius used across the Components. | |||
| $kendo-border-radius-xxxl | Number | k-map-get($kendo-spacing, 5) | 1.25rem |
Description
The second largest border radius used across the Components. | |||
| $kendo-border-radii | Map | (
none: $kendo-border-radius-none,
xs: $kendo-border-radius-xs,
sm: $kendo-border-radius-sm,
md: $kendo-border-radius-md,
lg: $kendo-border-radius-lg,
xl: $kendo-border-radius-xl,
xxl: $kendo-border-radius-xxl,
xxxl: $kendo-border-radius-xxxl
) | (none: 0px, xs: 1px, sm: 0.125rem, md: 0.25rem, lg: 0.5rem, xl: 0.75rem, xxl: 1rem, xxxl: 1.25rem, full: 9999px) |
Description
The global radii Map. | |||
| $kendo-border-radius-full | Number | 9999px | 9999px |
Description
The largest border radius used across the Components. | |||
