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 10 border radius steps, shown in the table below, ranging from none (no border radius) to full (completely rounded edges). The default step represents the standard border radius, which is equivalent to the md value of 4 px.
| Step | Value | Example |
|---|---|---|
| none | 0px | |
| xs | 1px | |
| sm | 0.125rem | |
| md | 0.25rem | |
| lg | 0.375rem | |
| xl | 0.5rem | |
| xxl | 0.75rem | |
| xxxl | 1rem | |
| full | 9999px |
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:
