Image Borders With CSS

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; }  

Image Borders With CSS