border-radius: More Than Just Rounded Corners
The border-radius property rounds an element's corners, used for everything from buttons to circular avatars. The footgun is its shorthand syntax: one value is simple, but two, three, or four values follow specific clockwise rules that are easy to mix up.
Why it exists
Before border-radius, creating rounded corners required image sprites or extra HTML elements. This was inefficient and hard to maintain. CSS needed a native, declarative way to soften box edges, simplifying design implementation and improving performance.
The mental model
Think of placing a shaping tool at each corner of an element's box. The border-radius property defines the size of that tool. A single value specifies a circular curve. Two values, separated by a slash, specify an elliptical curve, giving you independent control over the horizontal and vertical curvature.
How it works
border-radius is a shorthand that can set the curve for all four corners at once. The number of values determines how they are applied. One value (e.g., 10px) applies the same radius to all four corners. Two values (10px 20px) apply the first to top-left/bottom-right and the second to top-right/bottom-left. Three values (10px 20px 30px) apply to top-left, then top-right/bottom-left, then bottom-right. Four values apply clockwise from top-left. You can also create elliptical corners using a slash (/). For example, border-radius: 15px / 30px gives each corner a horizontal radius of 15px and a vertical radius of 30px.
When to use it
Use it to soften UI elements like buttons, inputs, and cards for a friendlier aesthetic. It is the standard way to create circular elements like user avatars (border-radius: 50% on a square element) or pill-shaped tags.
When not to use it
Avoid using many different radius values across a site, which can create visual inconsistency. The elliptical syntax (/) is powerful but can be complex; for most UI work, a single radius value is sufficient and more predictable. Don't use it for shapes that require sharp, 90-degree angles.
One canonical example
To create a perfect circle, apply border-radius: 50% to a square element. For a div with width: 100px and height: 100px, this value will produce a circle. If the element is rectangular, 50% will create an ellipse.
Interview question
Given the CSS declaration border-radius: 10px 20px;, which corners will receive a 20px radius?
- a.All four corners
- b.Top-left and bottom-right
- c.Only the bottom-right corner
- d.Top-right and bottom-leftCorrect
Why? this is the answer
The card states that with two values, the first value applies to the top-left and bottom-right corners, while the second value applies to the top-right and bottom-left corners. Therefore, 20px will be applied to the top-right and bottom-left corners. Option B describes the application of the 10px value.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #design systems
- #layout
- #styling
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles