# Radius > Use Honest UI's modern and traditional radius scales for consistent corners, pills, and circular shapes. Source: https://www.honestui.com/docs/theme/radius --- title: Radius description: Use Honest UI's modern and traditional radius scales for consistent corners, pills, and circular shapes. --- Radius tokens keep corner decisions consistent across components and let a product change its overall character without rewriting component classes. Honest UI provides seven roles, from subtle rounding to a full pill or circle. Radius values are resolved by `data-style`, so set either `modern` or `traditional` on the same shared ancestor that owns the component theme. ## Modern style Modern is the restrained, compact option. It uses small radii so boundaries remain clear in dense product interfaces. ## Traditional style Traditional keeps the same token names but resolves them to softer values. Component code does not need to change. ## Switch styles ```html ``` The attribute is not decorative metadata: without a supported `data-style` value, the radius variables are not defined. ## Tailwind usage ```tsx

Active

``` The class names stay the same when `data-style` changes; the browser resolves the radius token to the modern or traditional value. ## Practical guidance - Pick a token by the element's role and reuse it. Similar controls should not have slightly different corners. - Keep nested radii visually related. An inner element normally uses the same or a smaller token than its container. - Use `--hui-radius-full` for pills and circles rather than choosing an arbitrarily large number. - Radius does not make an element interactive. Preserve visible boundaries, affordances, labels, and focus indicators in both styles. - Test clipped focus rings and content near rounded corners. Use the focus-ring offset tokens documented in [Effects](/docs/theme/effects) when a container would otherwise cut the indicator off.