Border styles in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a solid border to the box.

CSS

div {
  border-style: [1];
}

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

Anone

Bsolid

Cdotted

Ddouble

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' will remove the border.

Using 'dotted' creates dots, not a solid line.

The border-style property sets the style of the border. solid creates a continuous line.

2fill in blank

medium

Complete the code to set the border width to 3 pixels.

CSS

div {
  border-width: [1];
}

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

A3px

Bmedium

Cthick

Dthin

Attempts:

3 left

💡 Hint

Common Mistakes

Using keywords like 'thin' or 'medium' instead of exact pixel value.

Forgetting to add 'px' after the number.

The border-width property sets the thickness of the border. Using 3px sets it to 3 pixels.

3fill in blank

hard

Fix the error in the code to correctly set a dashed border.

CSS

div {
  border-style: [1];
}

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

Adashes

Bdash

Cdashed

Ddot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dash' or 'dashes' which are not valid CSS border styles.

Confusing 'dotted' with 'dashed'.

The correct value for a dashed border is dashed. Other options are invalid CSS values.

4fill in blank

hard

Fill both blanks to create a red, double border.

CSS

div {
  border-style: [1];
  border-color: [2];
}

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

Adouble

Bsolid

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'solid' instead of 'double' for the style.

Using 'blue' instead of 'red' for the color.

border-style: double; creates a double line border.
border-color: red; colors the border red.

5fill in blank

hard

Fill all three blanks to create a 5px dotted green border.

CSS

div {
  border-width: [1];
  border-style: [2];
  border-color: [3];
}

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

A3px

B5px

Cdotted

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using '3px' instead of '5px' for width.

Using 'solid' instead of 'dotted' for style.

Using 'blue' or other colors instead of 'green'.

Set border-width to 5px for thickness.
Use dotted for the style to get dots.
Set border-color to green for the color.