New to Kendo UI for Vue? Start a free 30-day trial

Customizing Radii

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radius-noneNumberk-map-get($kendo-spacing, 0)0
Description
The none border radius used across the Components.
$kendo-border-radius-xsNumberk-map-get($kendo-spacing, 1px)1px
Description
The extra small border radius used across the Components.
$kendo-border-radius-smNumberk-map-get($kendo-spacing, 0.5)0.125rem
Description
The small border radius used across the Components.
$kendo-border-radius-mdNumberk-map-get($kendo-spacing, 1)0.25rem
Description
The medium border radius used across the Components.
$kendo-border-radius-lgNumberk-map-get($kendo-spacing, 1.5)0.375rem
Description
The large border radius used across the Components.
$kendo-border-radius-xlNumberk-map-get($kendo-spacing, 2)0.5rem
Description
The extra large border radius used across the Components.
$kendo-border-radius-xxlNumberk-map-get($kendo-spacing, 3)0.75rem
Description
The third largest border radius used across the Components.
$kendo-border-radius-xxxlNumberk-map-get($kendo-spacing, 4)1rem
Description
The second largest border radius used across the Components.
$kendo-border-radius-fullNumber9999px9999px
Description
The largest border radius used across the Components.
$kendo-border-radiiMapk-map-merge($_default-border-radii, $kendo-border-radii)(none: 0, xs: 1px, sm: 0.125rem, md: 0.25rem, lg: 0.5rem, xl: 0.5rem, xxl: 0.75rem, xxxl: 1rem, full: 9999px, DEFAULT: 0.25rem, 0: 0)
Description
The global radii Map.

In this article

Not finding the help you need?