Border styles in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS code?

Given the CSS below, what will be the visible border style of the box in the browser?

CSS

div {
  border: 5px dashed red;
  width: 100px;
  height: 100px;
}

A A dashed red border 5px thick

B A dotted red border 5px thick

C A solid red border 5px thick

D No border visible

💡 Hint

Look at the border style keyword used.

The border shorthand sets width, style, and color. Here, dashed means the border will be made of dashes.

❓ rendering

intermediate

Which border style will create a double line border?

You want a border with two parallel lines around a box. Which CSS border style value should you use?

A border-style: groove;

B border-style: double;

C border-style: ridge;

D border-style: inset;

💡 Hint

Think about the name that suggests two lines.

The double border style draws two parallel lines as the border.

❓ selector

advanced

Which CSS selector applies a border only to the top and bottom edges?

You want to add a 3px solid blue border only on the top and bottom edges of all paragraphs. Which CSS code achieves this?

A p { border-top: 3px solid blue; border-bottom: 3px solid blue; }

B p { border: 3px solid blue; border-left: none; border-right: none; }

C p { border-top: 3px solid blue; border-right: 3px solid blue; }

D p { border-top: 3px solid blue; border-bottom: 3px dotted blue; }

💡 Hint

Only top and bottom edges should have the border, and both must be solid blue.

Option A sets the border only on top and bottom edges with the correct style and color.

Option A sets border on all sides then removes left and right, which works but is less clear and can cause unexpected results.

Option A adds border on top and right, so right border appears incorrectly.

Option A uses different styles for top and bottom, so bottom is dotted, not solid.

❓ accessibility

advanced

Why is it important to consider border color contrast for accessibility?

You add a thin border around buttons for focus indication. Why should the border color have good contrast with the background?

A Because only border width matters for accessibility.

B Because border color does not affect accessibility.

C To make the border blend with the background for a subtle look.

D To ensure users with low vision can easily see the focus outline.

💡 Hint

Think about users who rely on visual cues to navigate.

Good contrast helps users with vision impairments notice focus outlines, improving keyboard navigation and accessibility.

❓ layout

expert

What is the visual effect of this CSS on the border layout?

Consider the CSS below applied to a container. What will the border look like in the browser?

CSS

div {
  border-width: 10px 5px 15px 0;
  border-style: solid;
  border-color: green;
  width: 150px;
  height: 100px;
}

A All borders 10px solid green

B No borders visible because left border width is zero

C Top border 10px, right 5px, bottom 15px, left 0 width (no border visible)

D Top border 10px, right 5px, bottom 15px, left no border

💡 Hint

Remember the order of border-width values: top, right, bottom, left.

The border-width shorthand sets widths in the order: top, right, bottom, left.

Left border width is 0, so no visible border on left side.

Other sides have solid green borders with specified widths.

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