Back to Home
Published: June 2026•By Web Util Slyce Team•5 min read
CSS Border Radius — Rounded Corners Reference
Learn how to use CSS border-radius for rounded corners. Generate custom border-radius with our Border Radius Generator.
Border Radius Values
| Value | Example | Result |
|---|---|---|
| 0 | border-radius: 0; | Sharp corners (default) |
| 4px | border-radius: 4px; | Slightly rounded — subtle cards, buttons |
| 8px | border-radius: 8px; | Moderately rounded — common card style |
| 12px | border-radius: 12px; | Noticeably rounded — modern UI |
| 16px | border-radius: 16px; | Very rounded — decorative elements |
| 9999px | border-radius: 9999px; | Pill shape (capsule buttons, chips) |
| 50% | border-radius: 50%; | Circle (square element becomes perfect circle) |
Individual Corner Control
Control each corner independently:
Shorthand (clockwise)
border-radius: 10px 20px 30px 40px;top-left, top-right, bottom-right, bottom-left
Two values
border-radius: 10px 30px;top-left & bottom-right = 10px, top-right & bottom-left = 30px
Individual properties
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;Full control over each corner
Elliptical corners
border-radius: 20px / 40px;Horizontal radius / vertical radius