Customizing Border Radius

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radius-noneNumberk-map-get($kendo-spacing, 0)0px
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: 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.

In this article

Not finding the help you need?