Border radius in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the correct CSS syntax to make all corners of a box rounded with a radius of 10px?

Choose the CSS rule that will apply a 10px rounded corner to all four corners of a box.

A border-radius: 10px 10px 10px;

B border-radius: 10px;

C border-radius: 10px 10px 10px 10px 10px;

D border-radius: 10;

💡 Hint

The property accepts one to four values, but one value applies to all corners.

The border-radius property with a single value applies that radius to all four corners equally.

Option B has three values, which is valid syntax but redundant as it also applies 10px to all corners. Option B has five values which is invalid. Option B misses the unit px.

❓ rendering

intermediate

What will the shape look like with this CSS rule?

Given this CSS rule, what shape will the box have when rendered in the browser?

border-radius: 50%;

A A rectangle with slightly rounded corners

B A square with sharp corners

C A perfect circle if the box is square, otherwise an ellipse

D A triangle shape

💡 Hint

Think about how percentage values affect the corners relative to the box size.

Setting border-radius: 50% makes the corners fully rounded. If the box is a square, it becomes a circle. If the box is a rectangle, it becomes an ellipse.

📝 Syntax

advanced

Which CSS rule applies border-radius only to the top-left and bottom-right corners?

You want to round only the top-left and bottom-right corners of a box with 15px radius. Which CSS code achieves this?

A border-top-left-radius: 15px; border-bottom-right-radius: 15px;

B border-radius: 0 15px 15px 0;

C border-radius: 15px 0 0 15px;

D border-radius: 15px 0 15px 0;

💡 Hint

Remember the order of values in the four-value border-radius shorthand: top-left, top-right, bottom-right, bottom-left.

The border-radius shorthand with four values applies to corners in this order: top-left, top-right, bottom-right, bottom-left.

Option A sets top-left and bottom-right to 15px, others to 0.

❓ layout

advanced

How does border-radius affect the layout of inline elements?

If you apply border-radius: 20px; to an inline element like <span> with background color, what will happen?

A The corners will be rounded but the element's box will only cover the text area

B The border-radius will be ignored on inline elements

C The element will become a block and take full width

D The element will overflow outside its container

💡 Hint

Think about how inline elements behave with background and border styles.

Inline elements only wrap their content area. Applying border-radius rounds the corners of their background and border but does not change their box size or display behavior.

❓ accessibility

expert

Why should you be careful using large border-radius values on focus outlines for accessibility?

When styling focus outlines with large border-radius values, what accessibility issue might occur?

A The element will become unclickable

B The element will lose keyboard focus functionality

C Screen readers will not announce the element

D The focus outline may become hard to see or disconnected from the element

💡 Hint

Focus outlines help users see which element is active. Think about visual clarity.

Large border-radius on focus outlines can cause the outline to appear detached or too thin, making it difficult for keyboard users to see which element is focused.