When building a site, sometimes your images need help standing out, or maybe you want to dress your images up just a little. That is where CSS comes in! You can add borders to anything, but today I will show you how to add borders to your images.
If you want to add borders to all of the images on your entire website, then you would simply use the img selector. Here is an example:


img {
border:1px dashed #F00;
}

Details

What this does is it selects anything that is an img and gives it a 1px thick border, makes it dashed and colors it red.
Your options for border types are solid, thin, medium, thick, dashed, dotted, inset, outset, double, groove, hidden, none, and ridge. Thin, medium and thick are used instead of the pixel size, but most designers use pixel dimensions to give an exact size.
Inset and Outset take the place of Dashed, Dotted, Etc. So you would style the same image like this:


img {
border:thick outset #F00;
}

Hidden and None

The default border style for any element is hidden. The problem with this is in certain browsers, if you don’t specify a border as none or hidden, then it will display a default blue border around your image if it links to another page or text. If you don’t want any borders around your images at all, specify your border style as none.

Below are examples of the different borders that you can implement with CSS. I kept the size as thick, so that they will be easy to see.

Double Borders


img {
border:thick double #F00;
}

Dotted Border


img {
border:thick dotted #F00;
}

Dashed Border



img {
border:thick dashed #F00;
}

Groove Border



img {
border:thick groove #F00;
}

Ridge Border



img {
border:thick ridge #F00;
}

Inset Border



img {
border:thick inset #F00;
}

Outset Border



img {
border:thick outset #F00;
}