CornerRadius

Corner radius is a graphical property that controls the roundness of the corners of a rectangle or other rectangular shape in a user interface. It is typically expressed as a length, measured in pixels or device-independent units, and a value of zero produces sharp corners. Increasing the radius makes the corners more rounded, altering the element's silhouette without changing its size.

In CSS, the border-radius property performs a similar function. It accepts one to four radii values and can use absolute units or percentages to create circular or elliptical corners. A single value applies uniformly; four values map to the top-left, top-right, bottom-right, and bottom-left corners. Using a percentage can produce pill-shaped or circular results when the element's dimensions are suitable.

In iOS and macOS, cornerRadius is a property of the rendering layer (CALayer). Setting it rounds the layer's corners; to ensure interior contents and sublayers are clipped to the rounded shape, the layer's masksToBounds must be enabled. Rounded corners can impact drawing performance, especially when combined with shadows or complex content, so designers may favor masking or discrete shapes for heavy UI elements.

Other platforms implement corner radii similarly. Android uses shape drawables with a corners attribute; Flutter and React Native expose borderRadius or CornerRadius properties in their style systems. Designers often use consistent radius values across an app to establish a cohesive look.

Best practices include choosing radii that fit the design language, ensuring accessibility with readable touch targets, and balancing aesthetics with rendering performance. Corner radii are a fundamental tool for modern UI, contributing to perceived friendliness and readability.