Use border-radius to round element corners. When its value uses ems, the radius becomes part of the component’s local scale: changing the font size changes the computed radius along with padding and other dimensions. section 2.2
Scale a component with its font size
A reusable box can keep its proportions while changing size through one font-size declaration: .box { padding: 1em; border-radius: 1em; background-color: lightgray; } .box-small { font-size: 12px; } .box-large { font-size: 18px; } The small and large boxes therefore receive different computed padding and corner radii. The same pattern appears in a panel, where padding uses 1em and the radius uses 0.5em. section 2.2 section 2.3.1
Choose the unit according to the relationship the corners should have with the component:
- Use ems when the radius should scale with the element’s local font size, including when inherited or user-adjusted font settings change. section 2.2
- Use ems or rems for most measures, including border-radius; use rems for predictable font sizes and pixels for fine borders. section 2.2.2
- Remember that the browser evaluates relative values to absolute computed values, so another font-size rule can change an em-based radius. section 2.2
