Question 1

What does the CSS border-radius property do?

Accepted Answer

The border-radius property rounds the corners of an element's border box. You can apply the same radius to all four corners at once, or set a different radius for each corner individually (top-left, top-right, bottom-right, bottom-left). It works on any block or inline-block element and affects the background, border, and box-shadow — but not the content unless you also add overflow: hidden.

Question 2

What is the difference between border-radius: 50% and border-radius: 9999px?

Accepted Answer

50% creates an ellipse on the element — a perfect circle only when the element is square. 9999px (or any very large value) creates fully rounded ends regardless of the element's proportions, making it ideal for pill-shaped buttons where the width is much greater than the height. For pill shapes, 9999px is more reliable; for circles, use 50% only on square elements.

Question 3

Can I set a different border-radius for each corner?

Accepted Answer

Yes. The shorthand border-radius: 10px 20px 30px 40px sets each corner individually in clockwise order: top-left, top-right, bottom-right, bottom-left. You can also use the longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius for fine-grained control.

Question 4

What units work with border-radius?

Accepted Answer

border-radius accepts px (fixed pixel values), % (relative to the element's dimensions), em (relative to the element's font size), and rem (relative to the root font size). Pixel values give predictable results; % is useful for circles and responsive shapes; rem scales well for accessible designs that respect user font-size preferences.

Property / value	Example	Result
Equal all corners	border-radius: 8px	Uniformly rounded corners
Shorthand 2 values	border-radius: 8px 16px	top-left/bottom-right \| top-right/bottom-left
Shorthand 4 values	border-radius: 4px 8px 12px 16px	top-left \| top-right \| bottom-right \| bottom-left
Pill shape	border-radius: 9999px	Fully rounded ends (button pill)
Circle	border-radius: 50%	Perfect circle on square element
One corner only	border-top-left-radius: 16px	Single corner rounded, others sharp
Elliptical corners	border-radius: 50% / 30%	Different horizontal and vertical radii
rem units	border-radius: 0.5rem	Scales with root font size (accessible)

Border Radius Generator

Border Radius Controls

Preview

CSS Border Radius Reference

Frequently Asked Questions

Related Tools

Color Picker

CSS Grid Generator

Box Shadow Generator