Unit 3 · CSS: the look and the layout
Why border: 5px shows no border in CSS
A border needs a style, such as solid, dashed or dotted. Without one the style is none, so nothing is drawn however wide you make it. Write border: 5px solid.
The mix-up
What people often think
“border: 5px is enough to draw a border.”
What the tutor says
A border needs a style as well as a width, or it is not drawn at all. Write border: 5px solid, and add a colour if you like.
What would a 5px border look like if nobody said whether it was solid, dashed or dotted?
How it works
The border shorthand takes up to three parts: width, style and colour. Width and colour have sensible defaults; style defaults to none, which means no border at all.
If you leave out the colour, the border uses the element’s text colour.
Side by side
.card { border: 5px; }.card { border: 5px solid #5145f5; }Practise it with a tutor watching
The box model
Predict exactly how much space a box takes, and size it with padding, border and margin.
Free, no account needed.