Customizing Radii
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-border-radius | Number | $border-radius | 0.375rem |
Description
The global border radius used across the Components. | |||
| $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, 0.5) | 0.125rem |
Description
The extra small border radius used across the Components. | |||
| $kendo-border-radius-sm | Number | $border-radius-sm | 0.25rem |
Description
The small border radius used across the Components. | |||
| $kendo-border-radius-md | Number | $kendo-border-radius | 0.375rem |
Description
The medium border radius used across the Components. | |||
| $kendo-border-radius-lg | Number | $border-radius-lg | 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, 8) | 2rem |
Description
The second largest border radius used across the Components. | |||
| $kendo-border-radius-full | Number | 50rem | 50rem |
Description
The largest border radius used across the Components. | |||
| $kendo-border-radii | Map | (
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,
full: $kendo-border-radius-full
) | (none: 0px, xs: 0.125rem, sm: 0.25rem, md: 0.375rem, lg: 0.5rem, xl: 0.75rem, xxl: 1rem, xxxl: 2rem, full: 50rem) |
Description
The global radii Map. | |||
