Border

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. What is the correct order for the border shorthand?

A style width color

B width style color

2. Which border-style value creates a continuous unbroken line?

A solid

B dashed

3. Does border: none remove a border completely?

A Yes

B No — it sets the color to none

4. Which property applies a border only to the top edge?

A border-top

B border-edge-top

5. Is border: 1px black valid CSS?

A Yes — style defaults to solid

B No — the style value is missing

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1border: 2px solid black		AWrong order — border shorthand must be width first, then style, then color
2border-top: 1px dashed red		Bborder-style: dotted
3Sets the line style of all four borders at once		Ccolour is not valid CSS — the correct spelling is border-color (American English)
4Controls only the thickness of a border		DAdds a dashed red border only to the top edge of an element
5border: solid 2px blue		EAdds a 2-pixel solid black line around all four sides of an element
6border-colour: red		Fborder-width: 4px

Definitions

border

Fill in the Blanks

Complete each line of code by filling in the missing parts.

p { border: 2px _____ red; }

div { ____________: blue; }

.box { ____________: 3px; }

p { border: 1px ______ black; }

h2 { ____________: dotted; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A p {

B border: solid 2px red;

C }

Question 2

A .card {

B border-width: 1px;

C border-styl: dashed;

D border-color: gray;

E }

Question 3

A h2 {

B border: 3px dotted;

C }

Question 4

A div {

B border-top: 2px solid navy;

C border-bottom: 2px solid navy;

D border-colour: navy;

E }

Question 5

A p {

B border: 0px solid black;

C }

Answer Key

Border

Section A: Quick Questions

B — width style color

A — solid

A — Yes

A — border-top

B — No — the style value is missing

Section B: Match the Pairs

border: 2px solid black → Adds a 2-pixel solid black line around all four sides of an element

border-top: 1px dashed red → Adds a dashed red border only to the top edge of an element

Sets the line style of all four borders at once → border-style: dotted

Controls only the thickness of a border → border-width: 4px

border: solid 2px blue → Wrong order — border shorthand must be width first, then style, then color

border-colour: red → colour is not valid CSS — the correct spelling is border-color (American English)

Section C: Definitions

border — A CSS shorthand property that sets a visible line around an element by specifying width, style, and color in one declaration, e.g. border: 2px solid black

Section D: Fill in the Blanks

p {
  border: 2px solid red;
}

div {
  border-color: blue;
}

.box {
  border-width: 3px;
}

p {
  border: 1px dashed black;
}

h2 {
  border-style: dotted;
}

Section E: Spot the Error

B — The shorthand order is wrong. CSS border shorthand requires width first, then style, then color: border: 2px solid red; not solid 2px red.

C — The property name is misspelled. border-styl is missing the letter e at the end — it should be border-style: dashed;

A — The h2 selector is fine, but the border shorthand on line 2 is incomplete. A border value without a color is technically valid but relies on currentColor — however a missing style value would make the border invisible. Here the color is omitted; add a color: border: 3px dotted black;

D — colour is not valid CSS — CSS uses American English. The correct property is border-color: navy;

B — A border-width of 0px makes the border invisible even though a style and color are set. To show no border use border: none; or to show the border set a non-zero width like border: 1px solid black;