Question 1

What is the border-radius shorthand syntax?

Accepted Answer

border-radius takes one to four values. One value rounds all corners equally; four values set top-left, top-right, bottom-right and bottom-left in that clockwise order. You can use px, %, em or any CSS length, for example border-radius: 12px or border-radius: 10px 30px 10px 30px.

Question 2

What is the difference between % and px for border-radius?

Accepted Answer

A px (or em) radius is a fixed length, so the curve stays the same size regardless of the box. A percentage is relative to the box's own dimensions — the horizontal radius is a percentage of the width and the vertical of the height — so 50% on a square produces a perfect circle and the corners scale with the element.

Question 3

What does the slash (/) mean in border-radius?

Accepted Answer

The slash separates horizontal radii from vertical radii, giving each corner an elliptical curve. Values before the slash are the horizontal radii and values after are the vertical radii, for example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. This eight-value form is how organic blob shapes are built.

Question 4

What order are the four border-radius values in?

Accepted Answer

Clockwise starting from the top-left: top-left, top-right, bottom-right, bottom-left. If you omit values CSS mirrors them — three values set top-left, then top-right and bottom-left together, then bottom-right; two values set the two diagonals.

Question 5

How do I make a squircle or blob shape with border-radius?

Accepted Answer

Switch to fancy mode and give each corner different horizontal and vertical percentages so the curves are elliptical and asymmetric, for example border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. Use the Blob and Squircle presets as a starting point and nudge the sliders until you like the silhouette.

Border RadiusGenerator

Border Radius
Generator