Border radius
Border radius is a critical element in web design, significantly impacting both aesthetics and user experience. This feature, which softens the corners of UI elements like buttons, input fields, and containers, plays a pivotal role in shaping the visual and interactive aspects of a website.
In Once UI, we adopt the T-shirt size model for managing border radius, with values ranging from XS to XL. We typically advise against using semantic naming for borders, as it tends to complicate the structure with minimal added value.
A common challenge in border-radius systems is nesting. For nested elements to maintain an aesthetic and natural appearance, they require varying border-radius sizes. Once UI addresses this issue by providing additional border-radius values specifically for containers with --size-4 and --size-8 paddings, which are the most frequently used nesting sizes. Of course, this can be expanded to accommodate as many sizes as needed.
Contrary to popular belief, the correct outer border radius value is not simply the sum of the inner border plus padding value. We're currently developing a general formula for this calculation. Meanwhile, we have manually crafted and tested values for three distinct border styles: Rounded, Playful, and Conservative. Switching between these styles is made simple through variable modes in Once UI.
