Border Radius

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.

DoApply consistent border radius values to all corners of an element to maintain a uniform shape, unless a specific, intentional shape is desired.

Don'tAvoid using varying border radius values on the same element as it can make the shape appear distorted and inconsistent.

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.

DoEnsure nested elements inherit the parent's border type and are smaller in size, creating a visually offset appearance.

Don'tAvoid mixing rounded and sharp-cornered nested elements, as this creates visual inconsistency and disrupts the cohesive design flow.

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.

DoUsing distinct border radius values for primary CTAs is a valuable option to ensure they stand out and effectively direct user attention.

Don'tAvoid 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.