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.

Practice

1. Which CSS border-style value creates a solid continuous line around an element?

easy

A. double

B. dotted

C. none

D. solid

Solution

1. Step 1: Understand border-style values

   The border-style property controls the line style of borders. Common values include solid, dotted, dashed, and double.

2. Step 2: Identify the solid line style

   The solid value creates a continuous, unbroken line around the element.

3. Final Answer:

   solid -> Option D

4. Quick Check:

   Solid border = continuous line [OK]

Hint: Solid means one continuous line, no breaks [OK]

Common Mistakes:

• Confusing 'dotted' with 'solid'
• Choosing 'double' thinking it's solid
• Selecting 'none' which means no border

2. Which of the following is the correct CSS syntax to set a dashed border style on a div?

easy

A. div { border-style: dash; }

B. div { border-style: dashed; }

C. div { border-style: dashes; }

D. div { border-style: dot; }

Solution

1. Step 1: Recall correct border-style values

   The valid CSS value for a dashed border is dashed. Incorrect values like dash, dashes, or dot are not recognized.

2. Step 2: Check syntax correctness

   The syntax border-style: dashed; correctly applies a dashed border style to the element.

3. Final Answer:

   div { border-style: dashed; } -> Option B

4. Quick Check:

   Dashed border uses 'dashed' keyword [OK]

Hint: Use 'dashed' exactly, not 'dash' or 'dashes' [OK]

Common Mistakes:

• Using incorrect keywords like 'dash' or 'dot'
• Missing semicolon at the end
• Applying border-style to wrong selector

3. What will be the visible border style of this CSS code?

p {
  border-width: 3px;
  border-style: double;
  border-color: blue;
}

medium

A. Two parallel blue lines with space between, total 3px thick

B. A single solid blue border 3px thick

C. A dotted blue border 3px thick

D. No visible border

Solution

1. Step 1: Understand the 'double' border style

   The double border style draws two parallel lines with a small space between them. The total thickness is controlled by border-width.

2. Step 2: Apply the given CSS properties

   The border is blue, 3px wide, and double style, so you see two blue lines side by side with a gap, all within 3px total width.

3. Final Answer:

   Two parallel blue lines with space between, total 3px thick -> Option A

4. Quick Check:

   Double border = two lines with gap [OK]

Hint: Double border shows two lines, not one [OK]

Common Mistakes:

• Thinking 'double' means thicker solid line
• Confusing 'double' with 'dotted'
• Ignoring border-width effect

4. Identify the error in this CSS snippet that prevents the border from showing:

div {
  border-style: solid;
  border-width: 0;
  border-color: red;
}

medium

A. border-width is set to 0, so border is invisible

B. Missing border property shorthand

C. border-color 'red' is not a valid color

D. border-style 'solid' is invalid

Solution

1. Step 1: Check border-width value

   The border width is set to 0, which means no visible border thickness.

2. Step 2: Understand effect on border visibility

   Even though style is solid and color is red, a 0 width border won't show on the page.

3. Final Answer:

   border-width is set to 0, so border is invisible -> Option A

4. Quick Check:

   Border width 0 means no visible border [OK]

Hint: Border width 0 hides border even if style and color set [OK]

Common Mistakes:

• Thinking 'solid' is invalid
• Assuming color affects visibility alone
• Believing shorthand is required

5. You want to create a responsive card with a border that changes style on hover: solid normally and dotted on hover. Which CSS code correctly achieves this?

hard

A. div.card { border-style: solid dotted; } div.card:hover { border-style: dotted solid; }

B. div.card { border-style: dotted; } div.card:hover { border-style: solid; }

C. div.card { border-style: solid; } div.card:hover { border-style: dotted; }

D. div.card { border-style: solid; border-hover-style: dotted; }

Solution

1. Step 1: Set default border style

   The card's normal border style should be solid, so div.card { border-style: solid; } sets this correctly.

2. Step 2: Change border style on hover

   Using the hover pseudo-class, div.card:hover { border-style: dotted; } changes the border style to dotted when the mouse is over the card.

3. Final Answer:

   div.card { border-style: solid; } div.card:hover { border-style: dotted; } -> Option C

4. Quick Check:

   Use :hover to change border-style dynamically [OK]

Hint: Use :hover selector to change border style on mouseover [OK]

Common Mistakes:

• Using invalid property 'border-hover-style'
• Swapping default and hover styles
• Trying to set two styles in one property incorrectly