Customizing Border Radius

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, 1.5)	0.375rem
Description The large border radius used across the Components.
$kendo-border-radius-xl	Number	k-map-get($kendo-spacing, 2)	0.5rem
Description The extra large border radius used across the Components.
$kendo-border-radius-xxl	Number	k-map-get($kendo-spacing, 3)	0.75rem
Description The third largest border radius used across the Components.
$kendo-border-radius-xxxl	Number	k-map-get($kendo-spacing, 4)	1rem
Description The second largest border radius used across the Components.
$kendo-border-radius-full	Number	9999px	9999px
Description The largest border radius used across the Components.
$kendo-border-radii	Map	k-map-merge($_default-border-radii, $kendo-border-radii)	none: 0px xs: 1px sm: 0.125rem md: 0.25rem lg: 0.375rem xl: 0.5rem xxl: 0.75rem xxxl: 1rem full: 9999px
Description The global radii Map.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components