← 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

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 journey and assign it to your class.

🖨 Print Worksheet and Answer key of Border (PDF)

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.

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.

Teach this with your class →

Quick Questions

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

A. width style color ✓

B. style width 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. No — the style value is missing ✓

B. Yes — style defaults to solid

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;

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?