Border radius in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the corners of the box rounded.

CSS

div {
  border-radius: [1];
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
}

Drag options to blanks, or click blank then click option'

A5em

Bsolid

C10px

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using border style values like 'solid' instead of length units.

Using 'none' which means no rounding.

The border-radius property controls how rounded the corners are. Using 10px rounds the corners by 10 pixels.

2fill in blank

medium

Complete the code to round only the top-left corner of the box.

CSS

div {
  border-top-left-radius: [1];
  width: 120px;
  height: 120px;
  background-color: #2196F3;
}

Drag options to blanks, or click blank then click option'

A5px solid

Bborder-radius

C20%

D15px

Attempts:

3 left

💡 Hint

Common Mistakes

Using the shorthand border-radius instead of the specific corner property.

Adding border style values like 'solid' which are invalid here.

The border-top-left-radius property rounds only the top-left corner. Using 15px sets the radius to 15 pixels.

3fill in blank

hard

Fix the error in the code to properly round all corners.

CSS

div {
  border-radius: [1];
  width: 150px;
  height: 150px;
  background-color: #FF5722;
}

Drag options to blanks, or click blank then click option'

A10px

B10px solid

C10px 10px 10px 10px

D10px 20px

Attempts:

3 left

💡 Hint

Common Mistakes

Adding border style keywords like 'solid' which cause errors.

Using multiple values incorrectly.

The border-radius property accepts one value to round all corners equally. Using 10px applies 10 pixels radius to all corners.

4fill in blank

hard

Fill the blank to round the top corners by 20px and bottom corners by 10px.

CSS

div {
  border-radius: [1];
  width: 180px;
  height: 180px;
  background-color: #9C27B0;
}

Drag options to blanks, or click blank then click option'

A20px 20px 10px 10px

B20px 10px

C10px 20px

D10px 10px 20px 20px

Attempts:

3 left

💡 Hint

Common Mistakes

Using two values like '20px 10px' which rounds diagonal corners.

Using reverse order like '10px 10px 20px 20px' which rounds bottom more.

The border-radius property with four values sets the corners in order: top-left, top-right, bottom-right, bottom-left. 20px 20px 10px 10px rounds the top corners by 20px and bottom corners by 10px.

5fill in blank

hard

Fill all three blanks to create a circle with diameter 100px.

CSS

div {
  width: [1];
  height: [2];
  border-radius: [3];
  background-color: #E91E63;
}

Drag options to blanks, or click blank then click option'

A100px

B50%

C100%

D50px

Attempts:

3 left

💡 Hint

Common Mistakes

Using different width and height values.

Using pixel values for border-radius instead of percentage.

To make a perfect circle, width and height must be equal (100px), and border-radius should be 50% to make the corners fully rounded.

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