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.
