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.

Practice

1. What does the CSS property border-radius do to an element?

easy

A. It makes the corners of the element rounded instead of sharp.

B. It changes the border color of the element.

C. It adds a shadow around the element.

D. It increases the border thickness.

Solution

1. Step 1: Understand the property purpose

   The border-radius property controls the roundness of the corners of an element.

2. Step 2: Compare options with property effect

   Only "It makes the corners of the element rounded instead of sharp." describes making corners rounded, which matches border-radius.

3. Final Answer:

   It makes the corners of the element rounded instead of sharp. -> Option A

4. Quick Check:

   border-radius = rounded corners [OK]

Hint: Remember: radius means roundness, so border-radius rounds corners [OK]

Common Mistakes:

• Confusing border-radius with border color or thickness
• Thinking it adds shadows
• Assuming it changes element size

2. Which of the following is the correct CSS syntax to make all corners of a box have a 10px rounded radius?

easy

A. border-radius: 10;

B. border-radius: 10px, 10px, 10px, 10px;

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

D. border-radius: 10px;

Solution

1. Step 1: Recall correct CSS syntax for border-radius

   The property accepts one to four length values without commas. For all corners equal, one value is enough.

2. Step 2: Check each option's syntax

   border-radius: 10px; uses one value with unit and no commas, which is correct. border-radius: 10; lacks units, C has too many values, D uses commas which are invalid.

3. Final Answer:

   border-radius: 10px; -> Option D

4. Quick Check:

   One value with unit, no commas = correct syntax [OK]

Hint: Use one value with unit and no commas for all corners [OK]

Common Mistakes:

• Omitting units like px
• Adding commas between values
• Using too many values

3. What will be the visual result of this CSS on a square div?

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

medium

A. A blue square with sharp corners

B. A blue circle

C. A blue rectangle with rounded corners

D. A blue square with a thick border

Solution

1. Step 1: Understand border-radius with percentage

   Setting border-radius: 50% on a square makes the corners fully rounded, forming a circle shape.

2. Step 2: Analyze the div shape and color

   The div is 100px by 100px, so a circle with 100px diameter and blue fill will appear.

3. Final Answer:

   A blue circle -> Option B

4. Quick Check:

   border-radius 50% on square = circle [OK]

Hint: 50% border-radius on square = circle shape [OK]

Common Mistakes:

• Thinking 50% means half-rounded corners only
• Confusing circle with rectangle
• Ignoring the shape dimensions

4. Identify the error in this CSS snippet that tries to round only the top-left corner:

div {
  border-radius-top-left: 15px;
}

medium

A. border-radius cannot round individual corners

B. Value 15px is missing units

C. Property name is incorrect; should be border-top-left-radius

D. The property needs !important to work

Solution

1. Step 1: Recall correct property for individual corner radius

   The correct property to round the top-left corner is border-top-left-radius.

2. Step 2: Check the given property name

   The snippet uses border-radius-top-left, which is invalid CSS syntax.

3. Final Answer:

   Property name is incorrect; should be border-top-left-radius -> Option C

4. Quick Check:

   Individual corner radius = border-top-left-radius [OK]

Hint: Remember: 'border-top-left-radius' for top-left corner [OK]

Common Mistakes:

• Swapping words in property name
• Forgetting units on values
• Thinking border-radius alone can target one corner

5. You want to create a button with the top-left and bottom-right corners rounded by 20px, and the other corners sharp. Which CSS code achieves this?

hard

A. border-radius: 20px 0 0 20px;

B. border-radius: 20px 0 20px 0;

C. border-radius: 20px 0 0 0 20px;

D. border-radius: 20px 0 20px 20px;

Solution

1. Step 1: Recall border-radius order for four values

   The order is top-left, top-right, bottom-right, bottom-left.

2. Step 2: Assign 20px to top-left and bottom-right, 0 to others

   So values should be: 20px (top-left), 0 (top-right), 20px (bottom-right), 0 (bottom-left).

3. Step 3: Match options with correct order

   border-radius: 20px 0 0 20px; matches this order correctly.

4. Final Answer:

   border-radius: 20px 0 0 20px; -> Option A

5. Quick Check:

   Order: top-left, top-right, bottom-right, bottom-left [OK]

Hint: Remember order: top-left, top-right, bottom-right, bottom-left [OK]

Common Mistakes:

• Mixing up the order of values
• Using five values instead of four
• Assigning wrong corners to values