Outlines and Focus Indicators

Draw a 4 pixel teal line around one travel card with border, and the same line around another card with outline. The two lines look almost identical, yet the bordered card grows from 340 to 348 pixels wide, and the outlined card stays at 340. An outline is a line drawn around an element that takes up no space in the layout, and this lesson shows what that means and where it is used.

The running example

The page shows three copies of the travel card. The first has a border, the second an outline, and the third has neither.

<!DOCTYPE html>
<html>
<head>