Border Radius Generator
Visually adjust border-radius values for all corners individually.
Corner Radius
Top Left
Top Right
Bottom Right
Bottom Left
Shape
CSS Code
border-radius: ;
Border Radius Syntax
The border-radius CSS property defines the radius of the element's corners. You can specify a single value for all corners, or up to four values to define top-left, top-right, bottom-right, and bottom-left separately.
Modern UI Design
Rounded corners are a staple of modern web design, appearing in cards, buttons, and inputs. They soften the UI and make interactions feel more friendly and organic compared to sharp edges.