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.