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.