Question 1

What is the difference between pixels (px) and percentages (%) in border radius?

Accepted Answer

Pixels define an absolute, fixed curve size that never changes, regardless of the element's dimensions. If you set 8px, the curve is always exactly 8 pixels wide and tall. Percentages calculate the curve based on the element's current width and height. If you set 50% on a rectangle that is 400px wide and 200px tall, the horizontal curve will be 200px and the vertical curve will be 100px, creating an oval. Pixels are best for consistent UI elements like cards, while percentages are best for responsive shapes like circular avatars.

Question 2

Why does my border radius not hide the image inside my div?

Accepted Answer

The border-radius property only rounds the bounding box, border, and background of the specific element it is applied to. It does not automatically force child elements (like an <img> tag) to obey that new curved boundary. Because the child element is still a sharp rectangle, it visually overflows the parent's rounded corners. To fix this, you must add the CSS property overflow: hidden; to the parent container, which instructs the browser to physically clip off any child content that bleeds outside the parent's rounded edges.

Question 3

How do I make a perfect circle using CSS?

Accepted Answer

To make a perfect circle, two conditions must be met. First, the element must have an exactly equal width and height (a perfect square bounding box), such as width: 200px; height: 200px;. Second, you must apply border-radius: 50%;. The browser will calculate the radius as exactly half the width and half the height, meeting perfectly in the middle of the element's edges to form a continuous circular curve. Using 100% will also visually work, but 50% is mathematically correct and more performant.

Question 4

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

Accepted Answer

The slash is used to separate horizontal radius values from vertical radius values, allowing you to create asymmetrical, elliptical curves. The values before the slash dictate how far the curve extends horizontally along the top and bottom edges. The values after the slash dictate how far the curve extends vertically along the left and right edges. For example, border-radius: 20px / 50px; creates corners that are narrow (20px wide) but tall (50px high), resulting in an elongated oval appearance.

Question 5

How do I apply a border radius to only one specific corner?

Accepted Answer

You can target individual corners using the longhand CSS properties instead of the shorthand. The four properties are border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Alternatively, you can use the shorthand property with four values. For example, border-radius: 10px 0 0 0; applies a 10-pixel radius to the top-left corner, and a 0-pixel radius (sharp corner) to the top-right, bottom-right, and bottom-left corners, moving in a clockwise direction.

Question 6

Why does border radius break when I use it on a table?

Accepted Answer

According to the CSS specification, the border-radius property is ignored on elements if the table has the border-collapse: collapse; property applied. When borders are collapsed, the browser merges the borders of adjacent cells, making it mathematically ambiguous where the outer curve should actually be drawn. To fix this, you must change the table to border-collapse: separate;, manually remove the internal spacing, and apply the border radius directly to the outermost corner

or	elements.

Question 7

What is the formula for matching nested border radii?

Accepted Answer

When placing a rounded element inside a rounded container with padding, applying the same radius to both creates an ugly, uneven gap. To make the curves perfectly concentric, you must use the formula: Outer Radius = Inner Radius + Padding. For example, if your inner image has a 4px radius, and the container has 8px of padding, the container's border-radius must be exactly 12px. This aligns the geometric center points of both curves, resulting in perfect visual harmony.

CSS Border Radius Generator

Command Palette