---
title: Usage
position: 2
seo_title: Guidelines for Using Border Radius
seo_description: Learn more about the recommendations and best practices for
  using border radius in the Telerik and Kendo UI themes. Consider the do's and don'ts when
  applying consistency, nested elements, and emphasis.
---
## Usage Guidelines

Industry-wise, border radius implementation follows some basic principles and established standards.

### Consistency

Applying consistent border radius values to all corners of an element is crucial for maintaining a clean and professional appearance. Uniformity in border radii ensures the element looks cohesive and well-designed, which enhances the overall aesthetic of the user interface and improves user perception of the product’s quality.

<DosDonts>
<Do description="Apply consistent border radius values to all corners of an element to maintain a uniform shape, unless a specific, intentional shape is desired.">![Recommendations for applying the consistency principle in the Telerik and Kendo UI context.](images/foundation-border-radius-usage-consistency-do.png "Apply the consistency principle in the Telerik and Kendo UI context.")</Do>
<Dont description="Avoid using varying border radius values on the same element as it can make the shape appear distorted and inconsistent.">![Using varying border radius values with the Telerik and Kendo UI components](images/foundation-border-radius-usage-consistency-dont.png "Don't use varying border radius values with the Telerik and Kendo UI components.")</Dont>
</DosDonts>


### Nested Elements

Using similar border radii for nested elements is important to maintain visual consistency and harmony within the interface. This approach ensures that all elements appear integrated and part of a unified design scheme, enhancing the user's ability to navigate and interact with the interface smoothly.

<DosDonts>
<Do description="Ensure nested elements inherit the parent's border type and are smaller in size, creating a visually offset appearance.">![Nested Telerik and Kendo UI elements using the parent's border radius value](images/foundation-border-radius-usage-nested-elements-do.png "When nesting Telerik and Kendo UI elements, use the parent's border radius value.")</Do>
<Dont description="Avoid mixing rounded and sharp-cornered nested elements, as this creates visual inconsistency and disrupts the cohesive design flow.">![Mixing Telerik and Kendo UI elements with rounded and sharp corners](images/foundation-border-radius-usage-nested-elements-dont.png "Mixing Telerik and Kendo UI elements with rounded and sharp corners makes the design inconsistent.")</Dont>
</DosDonts>


### Emphasis

Using different shapes, such as unique border radii, to emphasize primary actions is a valuable option for guiding user focus and highlighting key functionalities. This visual distinction can help clarify the hierarchy of actions within the application, allowing users to easily identify the most important tasks and engage with them.

<DosDonts>
<Do description="Using distinct border radius values for primary CTAs is a valuable option to ensure they stand out and effectively direct user attention.">![Using distinct border radius values for primary CTAs with the Telerik and Kendo UI components](images/foundation-border-radius-usage-emphasis-do.png "Use distinct border radius values for primary CTAs with the Telerik and Kendo UI components.")</Do>
<Dont description="Avoid using the same styling for primary and secondary CTAs, as this can obscure the primary functions of the app and confuse users about which actions are most important.">![Using the same styling for primary and secondary CTAs with the Telerik and Kendo UI components](images/foundation-border-radius-usage-emphasis-dont.png "Don't use the same styling for primary and secondary CTAs with the Telerik and Kendo UI components.")</Dont>
</DosDonts>