CSS Borders

CSS borders are a nice way to add a little something extra to a picture. The trick is to set the image apart from the rest of the article or post without the border overwhelming the image.

Border Properties

• border-width: This is the width of your border (ie 5px)
• border-style: none (no border), solid, dotted, dashed, double, groove, ridge, inset, outset
• border-color: You can use a color name, hex value (ie #369), or RGB value (ie rgb(0,0,255))
• To make a border with different styles on each side use: border-top-style, border-right-style, border-bottom-style, border-left-style

Thick Brown Border

The CSS

img.nameofclass {
border: 3px solid #300;
padding: 5px;
background: #630;
}

The xhtml:

Blue Double Border

The css:

img.nameofclass {
border: 5px double #399;
padding: 3px;
background: #9cc;
}

The xhtml:

Orange Inset Border

The css:

 img.nameofclass {
border: 5px inset #fc6;
padding: 3px;
background: #c30;
}

The xhtml:

Green Ridge Border

The css:

img.nameofclass {
border: 8px ridge #cf9;
padding: 2px 2px;
background: #063;
}

The xhtml:

Blue Variable Border

The css:

img.nameofclass {
border-top: 8px groove #399;
border-right: 5px solid #063;
border-bottom: 8px groove #399;
border-left: 5px solid #063;
padding: 2px;
background: #fff;
}

The xhtml:

How to use the code listed above

• Replace “nameofclass” with whatever name you want to use for the type of images you want to have a particular border. If you wanted a certain border for all pictures of buildings you might use img.buildingpics. It is best not to use the name of the picture (ie TowerofLondon.jpg) unless you will only be using a specific border for one picture.
• “Name of Image” is usually the name of the file or a very brief description of it (ie TowerofLondon)
• The xhtml will be used in the part of your document where you want the image with the border. On this page I used the xhtml in the body of the document in div with the main content just below the h2 heading.
• The CSS portion will go in your stylesheet.