Visualize and fine-tune border-radius values per corner. Use presets or go custom, and grab production-ready CSS.
Corner Radius
border-radius: 16px;
Frequently Asked Questions
Border-radius is a CSS property that rounds the corners of an element's outer border edge. It can be set uniformly (all corners the same) or per-corner. Values can be in px, %, em, or other CSS units. A value of 50% on a square element creates a circle.
Yes. The shorthand border-radius: TL TR BR BL sets each corner individually (top-left, top-right, bottom-right, bottom-left). You can also use individual properties like border-top-left-radius for fine control.
Set border-radius: 50% on a square element (equal width and height). For a pill/capsule shape on a rectangle, use a very large value like border-radius: 9999px.
No, border-radius is purely visual. The clickable area remains the full rectangular bounding box. To create truly rounded click areas, you would need clip-path, which does affect hit testing.