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.