Border Radius

Overview of Border Radius

Border radius is a design element that controls the roundness of an element's corners. It guides the user's focus and reflects brand identity. By adjusting the roundness of the corners, designers can create a more modern or traditional look and feel to their designs. A higher border radius value results in a more rounded corner, while a lower value produces a sharper corner. This simple, yet powerful tool can significantly impact the overall look and feel of a design.

Border Radius Steps

The Telerik and Kendo UI Design System defines 9 border radius steps, all computed from a single base value:

--kendo-border-radius-base: 0.25rem;

Each step is a multiplier of the base:calc(var(--kendo-border-radius-base) * N), ranging from none (0px) to full (9999x, completely rounded edges).

All border radius values are exposed as CSS custom properties: --kendo-border-radius-{step} and can be accessed in SCSS via the k-border-radius($key) function.

Key Principles

The Telerik and Kendo UI Design System endorses several basic principles related to border radius:

• Aesthetics and consistency—Maintain uniform border radii throughout your design to ensure a cohesive visual experience. Consistency helps in establishing a predictable and harmonious interface.
• Hierarchy and focus—To highlight key elements and establish visual hierarchy, use varying border radii.
• Accessibility—Ensure that elements with border radius also have sufficient contrast and clear visual boundaries. This enhances usability for all users, including those with visual impairments.
• Visual Impact—Align the curvature of the borders with your brand’s style and message. A more rounded border might convey a friendly and casual feel, whereas sharper corners can appear more formal and professional.

Theme-Specific Variables

For specific information about the border radius system in the Telerik and Kendo UI themes, refer to the theme-specific variables list:

Border radius for MeridianDiscover the Telerik and Kendo UI Meridian theme border radius variables list.

Border radius for BootstrapDiscover the Telerik and Kendo UI Bootstrap theme border radius variables list.

Border radius for MaterialDiscover the Telerik and Kendo UI Material theme border radius variables list.

Border radius for FluentDiscover the Telerik and Kendo UI Fluent theme border radius variables list.

Border radius for DefaultDiscover the Telerik and Kendo UI Default theme border radius variables list.

Border radius for ClassicDiscover the Telerik and Kendo UI Classic theme border radius variables list.