CSS Borders

We have learned already that we can control border positions and widths using CSS. This allows us to create all sorts of interesting effects, from virtual "picture frames" around our images to underlines beneath our text. Up until now we have just used solid borders, but in fact we have several different border styles at our disposal:

Solid border
border: 3px solid red
Dotted border
border: 3px dashed red
Dashed border
border: 3px dashed red
Double border
border: 3px double red
Groove border
border: 6px groove red
Ridge border
border: 6px ridge red
Inset border
border: 6px inset red
Outset border
border: 6px outset red

Here you can see demonstrations of several border styles, along with the code used to produce them. Note that some of these borders need to be thicker than one pixel in order to display properly, so it is worth playing around with them to get the effect you want.

Different borders on each side

In the example above we have used the same border properties on every side of our element. However, we can specify separate border properties for each side using the border-(side)-style, border-(side)-width and border-(side)-color CSS properties:

This is how the element appears. Notice that the borders on the left and bottom have different styles, widths and colors.
    border-left-style: dashed;
border-left-width: 5px;
border-left-color: orange;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: green;

There is also a shorthand way to combine each of these properties into one line rather than three, by using the border-(side) property and specifying the width, style, and color in that order. For example:

Here we have set different border properties for each side of the element
border-right: 1px solid black
border-bottom: 3px solid gray
border-left: 5px dashed orange
border-top: 3px double black

That just about covers borders. As you can see they are really very versatile and can be used to produce a wide range of interesting effects. The best way to learn is by experimenting with them; you'll find that with a bit of practice you can create almost any layout you want by combining the CSS padding, border and margin properties.