.svg)
What is border-radius in CSS?
The border-radius property rounds the corners of an HTML element. It accepts one or more values defining the curve radius of each corner. It is one of the most used CSS properties in modern web design, softening the rectangular shapes of blocks, buttons, cards and images.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
How does border-radius work?
The syntax lets you set a uniform radius or a different one per corner. With a single value, all corners are identical. With four values, you control each corner individually (top-left, top-right, bottom-right, bottom-left). A value of 50% turns a square into a perfect circle.
Common use cases
Border-radius is everywhere in UI design: rounded buttons, circular avatars, soft-cornered cards, badges and tags, and styled form inputs. Combined with overflow: hidden, it crops images into rounded shapes without touching the source file.
Unlimited requests, fast results
Submit as many briefs as you need. Our plans allow you to manage a continuous flow of design requests, without limits and without friction, and at an economic cost.
Conclusion
Border-radius is a simple but essential property of modern web design. It improves the look of interfaces by softening shapes, and its universal browser support makes it a staple of every designer's and front-end developer's toolkit.
Key takeaways
- CSS property that rounds the corners of HTML elements
- Accepts 1 to 4 values to control each corner
- 50% turns a square into a circle
- Compatible with every modern browser
- Used for buttons, avatars, cards and images
Unlimited requests, fast results
Submit as many briefs as you like. Our plans let you manage a continuous flow of design requests, without limits or friction, and at an economical price.
