Preview
Border Radius
border-radius: 16px;Presets
About Border Radius
Shorthand Syntax
border-radius accepts 1-4 values: one value applies to all corners, two values set top-left/bottom-right and top-right/bottom-left pairs, three values set top-left, horizontal pairs, and bottom-right, four values set each corner individually (clockwise from top-left).
Units
Use px for fixed sizes, % for responsive curves relative to the element size, and rem/em for scalable designs that respect user font preferences.
Pill Shapes
Use a very large value (like 9999px or 50%) to create pill-shaped buttons or fully rounded elements. The browser caps the radius at half the element's smallest dimension.
Elliptical Corners
For elliptical corners, use the syntax border-radius: 10px / 20pxwhere the first value is horizontal radius and the second is vertical. This creates oval-shaped corners instead of circular ones.