Border in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS border style?

Given the CSS below, what will be the visible border style on the element?

CSS

div {
  border: 5px dashed red;
}

A A 5px wide dotted red border around the element

B A 5px wide solid red border around the element

C No border visible because dashed is invalid

D A 5px wide red dashed border around the element

💡 Hint

The border shorthand uses width, style, and color in that order.

The border property sets width, style, and color. 'dashed' is a valid border style that creates a dashed line. So the element will have a 5px wide red dashed border.

🧠 Conceptual

intermediate

How many borders will be visible with this CSS?

Consider the CSS below. How many visible borders will the element have?

CSS

div {
  border-top: 3px solid blue;
  border-right: 3px solid blue;
  border-bottom: 0;
  border-left: none;
}

A Four visible borders all blue

B No visible borders because bottom and left hide them

C Two visible borders: top and right

D Three visible borders: top, right, and bottom

💡 Hint

border-bottom: 0 and border-left: none both remove those borders.

border-top and border-right are set to 3px solid blue, so they show. border-bottom: 0 and border-left: none remove those borders, so only two borders are visible.

❓ selector

advanced

Which CSS selector applies border only to paragraphs inside a section?

You want to add a 2px solid green border only to

elements inside

elements. Which CSS selector is correct?

A section p { border: 2px solid green; }

B p > section { border: 2px solid green; }

C section > p { border: 2px solid green; }

D p.section { border: 2px solid green; }

💡 Hint

The > selector means direct child, and space means any descendant.

The selector 'section > p' targets only

elements that are direct children of

. 'section p' targets all descendants, not just direct children. 'p > section' is reversed and invalid for this case. 'p.section' targets

with class 'section'.

❓ layout

advanced

What happens to element size with border-box vs content-box?

If an element has width: 200px and border: 10px solid black, what is the total width of the element with box-sizing: border-box vs content-box?

A Both have 200px total width

B border-box: 200px total width; content-box: 220px total width

C Both have 220px total width

D border-box: 220px total width; content-box: 200px total width

💡 Hint

border-box includes border inside width, content-box adds border outside width.

With border-box, the border is included inside the 200px width, so total width is 200px. With content-box (default), border adds outside content width, so total width is 200 + 10*2 = 220px.

❓ accessibility

expert

Which border color choice best supports accessibility?

You want to add a border to a button for focus indication. Which border color choice best supports accessibility for users with low vision?

A border: 3px solid #FF0000 (bright red)

B border: 3px solid #777777 (medium gray)

C border: 3px solid #FFFFFF (white)

D border: 3px solid #000000 (pure black)

💡 Hint

High contrast colors help users with low vision see focus outlines clearly.

Bright red (#FF0000) provides strong contrast on most backgrounds and is easily visible. Pure black or white may blend in depending on background. Medium gray has low contrast and is hard to see.

Practice

1. What does the CSS border property do?

easy

A. Changes the background color of an element

B. Adds a line around an element to separate or highlight it

C. Sets the font size of text inside an element

D. Removes the element from the page

Solution

1. Step 1: Understand the purpose of the border property

   The border property in CSS is used to add a visible line around an element.

2. Step 2: Compare with other options

   Other options describe unrelated CSS properties like background color or font size, which are not related to borders.

3. Final Answer:

   Adds a line around an element to separate or highlight it -> Option B

4. Quick Check:

   Border = line around element [OK]

Hint: Border means line around element edges [OK]

Common Mistakes:

• Confusing border with background color
• Thinking border changes text size
• Assuming border removes element

2. Which of the following is the correct CSS syntax to set a solid red border of 2px thickness?

easy

A. border: 2 solid red px;

B. border: soild 2px red;

C. border: red 2px soild;

D. border: 2px solid red;

Solution

1. Step 1: Recall the correct order in border shorthand

   The correct order is border-width, border-style, then border-color.

2. Step 2: Check each option's order

   border: 2px solid red; follows the correct order: 2px (width), solid (style), red (color). Others have wrong order or invalid syntax.

3. Final Answer:

   border: 2px solid red; -> Option D

4. Quick Check:

   Width Style Color order = correct [OK]

Hint: Remember: width style color order in border [OK]

Common Mistakes:

• Mixing order of width, style, and color
• Using invalid units or missing units
• Putting color before style

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

div { border: 3px dashed blue; }

medium

A. 3px thick dashed blue border

B. 3px thick solid blue border

C. 3px thick dotted red border

D. No border will appear

Solution

1. Step 1: Read the border shorthand values

   The rule sets border width to 3px, style to dashed, and color to blue.

2. Step 2: Match the description to the options

   The option describing a 3px thick dashed blue border correctly matches the CSS rule. Others mismatch style, color, or visibility.

3. Final Answer:

   3px thick dashed blue border -> Option A

4. Quick Check:

   3px dashed blue = dashed border [OK]

Hint: Match border style word exactly (solid, dashed, dotted) [OK]

Common Mistakes:

• Confusing dashed with dotted or solid
• Ignoring the color specified
• Assuming no border if style is unknown

4. Identify the error in this CSS border declaration:

p { border: 5px dotted; }

medium

A. Border width unit is incorrect

B. Dotted is not a valid border style

C. Missing border color value

D. Border property cannot be used on paragraphs

Solution

1. Step 1: Check the border shorthand completeness

   The border shorthand requires width, style, and optionally color. Here, color is missing.

2. Step 2: Verify other options

   Width unit '5px' is correct, 'dotted' is valid style, and border can be applied to paragraphs.

3. Final Answer:

   Missing border color value -> Option C

4. Quick Check:

   Border shorthand needs width, style, color [OK]

Hint: Border shorthand needs width, style, and color [OK]

Common Mistakes:

• Forgetting to add color in border shorthand
• Thinking dotted is invalid style
• Assuming border can't be on text elements

5. You want to create a responsive card with a border that changes thickness on smaller screens. Which CSS approach correctly applies a 4px solid black border normally, and a 2px solid black border on screens narrower than 600px?

hard

A. .card { border: 4px solid black; } @media (max-width: 600px) { .card { border: 2px solid black; } }

B. #card { border: 4px solid black; } @media (min-width: 600px) { #card { border: 2px solid black; } }

C. card { border: 4px solid black; } @media (max-width: 600px) { card { border: 2px solid black; } }

D. .card { border: 4px solid black; } @media (min-width: 600px) { .card { border: 2px solid black; } }

Solution

1. Step 1: Identify correct selector syntax

   Classes require a dot prefix, so '.card' is correct, 'card' without dot is invalid.

2. Step 2: Check media query logic for screen width

   To apply styles on screens narrower than 600px, use max-width: 600px. Options using min-width apply to wider screens.

3. Final Answer:

   .card { border: 4px solid black; } @media (max-width: 600px) { .card { border: 2px solid black; } } -> Option A

4. Quick Check:

   Class selector + max-width media query = correct [OK]

Hint: Use .class selector and max-width for smaller screens [OK]

Common Mistakes:

• Missing dot for class selector
• Using min-width instead of max-width for smaller screens
• Incorrect nesting of media query rules