Border Radius

Create corners that match the component

Border radius rounds an element’s border box and can use separate horizontal and vertical values. A modest radius suits a panel; a larger radius can make a pill or organic shape. The visible result depends on both the radius and the element’s width and height.

How to use this tool

1. Link the corners for a consistent starting point, or adjust them individually when the shape needs asymmetry.
2. Try pixel values for predictable component corners and percentages for shapes that change with element dimensions.
3. Copy the border-radius declaration. Check nested surfaces and images so that their corners follow the same visual logic.

The image has a smaller radius to sit comfortably inside the panel’s padding. Border radius does not automatically clip every descendant. If an image extends outside the rounded edge, inspect its own radius or the container’s overflow.