Border 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'

Asolid

Bdouble

Cnone

Ddotted

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' will remove the border.

Using 'dotted' or 'double' changes the border style but not to solid.

The border-style property sets the style of the border. Using solid creates a solid line around the element.

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

Bthin

Cmedium

Dthick

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting to include the unit 'px'.

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 the border color to red.

CSS

div {
  border-color: [1];
}

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

Ablue

B#ff0000

Crgb(0, 255, 0)

Dredd

Attempts:

3 left

💡 Hint

Common Mistakes

Typos in color names like 'redd'.

Using a color code for green or blue instead of red.

The correct way to specify red color in hex is #ff0000. The option 'redd' is a typo and invalid.

4fill in blank

hard

Fill both blanks to create a dashed blue border with 4 pixels thickness.

CSS

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

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

Adashed

Bsolid

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

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

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

Setting border-style to dashed creates a dashed line. Setting border-color to blue colors the border blue.

5fill in blank

hard

Fill all three blanks to create a thick, dotted, green border.

CSS

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

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

Athin

Bthick

Cdotted

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'thin' instead of 'thick' for width.

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

Using wrong color names.

Use thick for a thick border width, dotted for the style, and green for the color.