How to Add Borders to Your Website on the Raspberry Pi

By Sean McManus, Mike Cook

You can use the Raspberry Pi to put a border around different parts of your web page, which is a good way to mark out where the parts begin and end, and to draw attention to the most important elements. You can use eight different styles of border.

[Credit: The Midori browser is written by Christian Dywan with artwork by Nancy Runge]

Credit: The Midori browser is written by Christian Dywan with artwork by Nancy Runge

Here are the three properties of the border that you can control:

  • border-width: This specifies the size of the border in pixels. For a thin line, use 1px. For something chunkier, use 4px. Higher values are possible, but rarely look good.

  • border-style: This defines what the border will look like. Most of the time, you will want to use solid, and that’s assumed by default. The other options are dotted, dashed, double, groove, ridge, inset, and outset.

  • border-color: You can specify a color name or color number for border.

Try adding a thin black border around the h1 and h2 headings. You can style them both at the same time by listing them together, separated by a comma, before the curly brackets, like this:

h1, h2 { border-width: 1px;
   border-style: solid;
   border-color: black; }

You can use a shorthand form for styling the border, too, which replaces those three instructions with a single one like this:

h1, h2 { border: 1px black solid; }

If you don’t want a border on all sides, you can specify which side you want it (top, bottom, left, or right), like this, which creates a nice horizontal line under your heading:

h1, h2 { border-bottom: 1px black solid; }