×

css · level 1 · unit 5 · lesson 3

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

A draws a line round the box.

A border is a line round the edge of a box, outside the padding. border is a : one property that sets three things at once, a width, a style and a colour, like 3px solid teal.

The style says how the line looks: solid for a plain line, dashed for dashes and dotted for dots. Leave out the style and there is no border at all.

Want one side only? border-bottom draws a line under the box, which looks smart under a heading. border-top, border-left and border-right work the same way.

<div class="ticket">Admit one</div>
.ticket {
  border: 3px dashed crimson;
  padding: 16px;
}

Press show my page to see it here.

Try dotted and then solid in place of dashed.