← HTML & CSS

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

Part of: HTML and CSS Journey — Module 45, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 38

Understanding Border in HTML & CSS

What it does: border-style controls the visual pattern of the border line and accepts values such as solid, dashed, dotted, and none. border-width is the individual property for setting border thickness, separate from style and color. CSS has four directional border properties: border-top, border-right, border-bottom, and border-left. border-edge-top does not exist. thick is a keyword value for border-width. Its exact pixel size depends on the browser, but is typically around 5px — it does not mean 100px.

Common mistakes: The shorthand order is wrong. CSS border shorthand requires width first, then style, then color: border: 2px solid red; not solid 2px red. The property name is misspelled. border-styl is missing the letter e at the end — it should be border-style: dashed;.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Border to a class →

This module's key terms are also in a printable crossword (Modules 43–52) and word search (Modules 43–63).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
What is the correct order for the border shorthand?
width style colorstyle width color
Matches
border: solid 2px blue
↓
Wrong order — border shorthand must be width first, then style, then color
Applying
Meanings
Term
border
Meaning
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
Practice
p {
Testing
Gaps
border: 2px red;
Check Answer
Spots
1p {
2 border: solid 2px red;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Badger' badge — Determined Digger, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. What is the correct order for the border shorthand?
A. style width color
B. width style color ✓
The border shorthand follows the order: width, then style, then color — for example border: 2px solid black.
2. Which border-style value creates a continuous unbroken line?
A. solid ✓
B. dashed
solid draws one unbroken line. dashed draws a series of short segments with gaps between them.
3. Does border: none remove a border completely?
A. Yes ✓
B. No — it sets the color to none
border: none sets the border-style to none, which means no border is rendered regardless of width or color.
4. Which property applies a border only to the top edge?
A. border-top ✓
B. border-edge-top
CSS has four directional border properties: border-top, border-right, border-bottom, and border-left. border-edge-top does not exist.
5. Is border: 1px black valid CSS?
A. Yes — style defaults to solid
B. No — the style value is missing ✓
The border shorthand requires at least a style value. Without a style, the browser will not render the border. Add a style: border: 1px solid black.

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)

Key Term

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

Fill in the Blanks

1. p { border: 2px solid red; }
Hint: Type the border-style value that produces a continuous unbroken line
2. div { border-color: blue; }
Hint: Type the individual CSS property that sets only the colour of a border
3. .box { border-width: 3px; }
Hint: Type the individual CSS property that sets only the thickness of a border
4. p { border: 1px dashed black; }
Hint: Type the border-style value that produces a series of short dashes
5. h2 { border-style: dotted; }
Hint: Type the individual CSS property that sets only the line style of a border

Spot the Error

Question 1
A p {
B border: solid 2px red;
C }
Line B — The shorthand order is wrong. CSS border shorthand requires width first, then style, then color: border: 2px solid red; not solid 2px red.
Question 2
A .card {
B border-width: 1px;
C border-styl: dashed;
D border-color: gray;
E }
Line C — The property name is misspelled. border-styl is missing the letter e at the end — it should be border-style: dashed;
Question 3
A h2 {
B border: 3px dotted;
C }
Line 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;
Question 4
A div {
B border-top: 2px solid navy;
C border-bottom: 2px solid navy;
D border-colour: navy;
E }
Line D — colour is not valid CSS — CSS uses American English. The correct property is border-color: navy;
Question 5
A p {
B border: 0px solid black;
C }
Line 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;

Student with a class code? Join your class →