Rounded Corners
A decorative treatment that rounds the corners of images or UI elements, creating a softer and more approachable visual appearance.
Rounded corners is a decorative treatment that replaces sharp right angles with smooth arcs at the corners of images or UI elements. Rounded designs convey a softer, friendlier impression and are widely adopted in modern web and app interfaces. In CSS, the border-radius property controls the degree of rounding.
Larger radius values produce more pronounced curves. Setting the radius to 50% of both width and height creates a perfect circle, which is how social media profile icons achieve their circular shape. Typical card designs use 8-16px border radius for a balanced look.
To permanently bake rounded corners into an image file, the circle crop tool can trim images into circular shapes. Combining rounded corners with drop shadows and borders creates cohesive card-based layouts.