Question 1

What is the difference between shorthand and individual corner values in border-radius?

Accepted Answer

The shorthand border-radius: 10px sets all four corners equally. You can target individual corners with border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. The shorthand also accepts 1–4 values following the same top/right/bottom/left pattern as margin and padding.

Question 2

Should I use pixels or percentages for border-radius?

Accepted Answer

Use percentages (e.g., border-radius: 50%) when you want the radius to scale proportionally with the element's size — this is the standard technique for making a perfect circle or pill shape. Use pixels or rem when you want a fixed corner roundness regardless of element size, which is common for cards, buttons, and inputs.

Question 3

What is the elliptical border-radius slash syntax?

Accepted Answer

The slash syntax (e.g., border-radius: 40px / 20px) creates elliptical corners by specifying separate horizontal and vertical radii. The values before the slash define horizontal radii for all four corners; the values after define vertical radii. This allows oval or egg-shaped corner effects that a single radius value cannot achieve.

Question 4

Does border-radius interact with borders and outlines?

Accepted Answer

Yes. border-radius clips the element's background and border. The inner border radius (visible inner curve) is automatically calculated as border-radius minus border-width, which means very thick borders can make the inner corner appear sharp even if the outer corner is rounded. outline is not clipped by border-radius — it stays rectangular unless you use outline-offset tricks or box-shadow as a substitute.

Question 5

How do I make border-radius responsive?

Accepted Answer

Use relative units like em, rem, vw, or % instead of fixed px values. For example, border-radius: 1rem scales with the root font size, and border-radius: 2vw scales with the viewport width. Alternatively, use CSS clamp(): border-radius: clamp(4px, 1vw, 16px) to set a minimum, preferred, and maximum value.

CSS Border Radius Generator

About this tool

Frequently Asked Questions

Comments & Feedback