Image borders using css
It took me forever to figure out how to place a nice border around my images. So, here’s a quick tutorial for those out there who are interested in learning.
Firstly, get an image (I usually do this technique around icons in posts, I think it just gives everything a nice finished look). The one I’m using is 100px by 100px. Insert the coding below into your stylesheet, this is what defines the border and padding. Please adjust the default settings to your liking.
img.border {
display:block;
float:left;
border:1px solid #DDD;
padding:3px;
margin-right:6px;
background-color:#fff;}
To activate (I don’t know how else to phrase this) the effect, just add class="border" when you insert an image.
<img src="Image url" alt="description" class="border"/>
Here are some examples of what the end result will look like with a solid, dotted, and dashed border.
