Question 1

What is border-radius in CSS?

Accepted Answer

border-radius rounds the corners of an element. You can set one value for all corners, four values for each corner, or eight values (horizontal/vertical) to create elliptical corners.

Question 2

How do I make an elliptical corner?

Accepted Answer

Use the slash syntax: border-radius: 50px / 25px;. The value before the slash is the horizontal radius, after is the vertical radius. Per-corner syntax is border-top-left-radius: 50px 25px;.

Question 3

How do I make a perfect circle?

Accepted Answer

Set border-radius: 50% on a square element. If width and height are equal, 50% produces a perfect circle. Otherwise it makes an ellipse.

Question 4

What units can I use for border-radius?

Accepted Answer

border-radius accepts px, em, rem, %, pt, vh, vw and most CSS length units. Percentages are relative to the element dimensions — 50% makes a circle when the element is square.