LESSON 43 OF 100

Build a complete border

Define a border’s width, style and colour.

Official sourceW3C CSS Backgrounds and Borders — bordersReviewed: 2026-08-26
STEP 1 · LEARN

How it works

A visible border has a width, style and colour. The three properties can be controlled separately, and solid makes the border surface visible.

Correct example
.notice { border-width: 2px; border-style: solid; border-color: #0f766e; }

The border is 2px wide and uses the requested teal colour.

Common mistake
.notice { border-width: 2px; border-style: none; border-color: #0f766e; }

With border-style: none, the computed width becomes zero and the border is not drawn.

STEP 2 · APPLY

Your exercise

Complete the three declarations for a 2px solid #0f766e border.

STEP 3 · BUILD

Write and see the result

index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The border is 2px wide.
  • The border uses the solid style.
  • The border uses #0f766e.
  • The target message is present.
Explain the solution logic

Width, style and colour together describe the border painted around the box.