Question 1

What is the shorthand for CSS border-radius?

Accepted Answer

The shorthand follows the same top-right-bottom-left clockwise pattern as other CSS box properties: border-radius: top-left top-right bottom-right bottom-left; With fewer values: 1 value = all corners equal; 2 values = top-left & bottom-right / top-right & bottom-left; 3 values = top-left / top-right & bottom-left / bottom-right. A perfect circle uses border-radius: 50%.

Question 2

How do I make an elliptical border-radius?

Accepted Answer

Use the slash syntax: border-radius: horizontal-radius / vertical-radius; Example: border-radius: 50px / 30px; This creates corners with different horizontal and vertical curvatures — like a squished circle. You can also use it per-corner: border-radius: 100px 0 0 0 / 50px 0 0 0; for just the top-left corner.

Question 3

What does border-radius: 50% do?

Accepted Answer

On a square element, border-radius: 50% creates a perfect circle. On a rectangle, it creates an ellipse — the radius is 50% of each dimension independently. To always get a circle regardless of element size, use border-radius: 50% on a square (equal width and height). For avatars and profile images, this is the standard technique.

Question 4

What is the 'squircle' and can I create it in CSS?

Accepted Answer

A squircle is a superellipse between a square and a circle — smooth curves at every corner with no sharp transition. Apple uses it for app icons. In CSS, you can approximate it with border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% (vary the values for different squircle shapes) or using SVG path. The CSS 'superellipse' keyword is not yet supported.

Border-Radius Visualizer

Common border-radius patterns

Frequently asked questions

Related design tools

Round the right corners, every time