---
title: Overview
position: 1
seo_title: Overview of Border Radius
seo_description: Learn more about the border radius approaches used to represent
objects and elements when working with the Telerik and Kendo UI components.
---
## 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:
```css
--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:
