border-radius Is More Powerful Than You Think

Most developers use border-radius with a single value. border-radius: 8px for cards, border-radius: 50% for circles, maybe border-radius: 9999px for pill-shaped buttons. That covers 90% of use cases. But the property accepts up to eight values, and the shapes you can create with the full syntax are surprisingly versatile. Let me show you what the full specification actually allows. The shorthand is hiding complexity The border-radius property is shorthand for four individual properties: border-top-left-radius : 10 px ; border-top-right-radius : 10 px ; border-bottom-right-radius : 10 px ; border-bottom-left-radius : 10 px ; Each of these individual properties accepts two values: a horizontal radius and a vertical radius. When they're different, the corner becomes an elliptical arc instead of a circular one. /* Circular corner: 10px radius */ border-top-left-radius : 10 px ; /* Elliptical corner: 20px wide, 10px tall */ border-top-left-radius : 20 px 10 px ; The full shorthand uses a sl