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

Customizing Border Radius

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-border-radius-noneNumbermap.get($kendo-spacing, 0)0px
Description
The none border radius used across the Components.
$kendo-border-radius-xsNumbermap.get($kendo-spacing, 1px)1px
Description
The extra small border radius used across the Components.
$kendo-border-radius-smNumbermap.get($kendo-spacing, 0.5)0.125rem
Description
The small border radius used across the Components.
$kendo-border-radius-mdNumbermap.get($kendo-spacing, 1)0.25rem
Description
The medium border radius used across the Components.
$kendo-border-radius-lgNumbermap.get($kendo-spacing, 2)0.375rem
Description
The large border radius used across the Components.
$kendo-border-radius-xlNumbermap.get($kendo-spacing, 3)0.5rem
Description
The extra large border radius used across the Components.
$kendo-border-radius-xxlNumbermap.get($kendo-spacing, 4)0.75rem
Description
The third largest border radius used across the Components.
$kendo-border-radius-xxxlNumbermap.get($kendo-spacing, 5)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-radiiMap$_default-border-radii
  • 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.

In this article

Not finding the help you need?