Simple css borders around your images
2012/05/20 Css resources, examples & tutorials for webmasters and online professionals
Simple css borders around your images
You can use css to liven up your images and all give them a similar look throughout your website. There are a number of things you can do, mainly by creating a nico of fun looking border.
Instead of explaining too much I've created some nice examples below.
Examples - Images with borders
On most sites it looks nice to have a light border around you images with a bit of padding (so the border stays clear of the image), as you can see in the first example. In the third example the image is placed inside a div element to create a double border. The last element uses different borders for the top/bottom and sides of the image.
CSS code:
img{
border:solid 1px #999;
padding:1px;
}
img{
border:solid 1px #999;
padding:1px;
}
CSS code:
img{
border:solid 3px #999;
padding:2px;
}
img{
border:solid 3px #999;
padding:2px;
}
CSS code (this image is placed inside a div element to create the double border)
div{
border: 3px solid #DDD;
}
img{
border:solid 3px #BBB;
}
div{
border: 3px solid #DDD;
}
img{
border:solid 3px #BBB;
}
CSS code:
img{
border-top: 4px solid #6999C7;
border-bottom: 4px solid #6999C7;
border-left: 1px dotted #999;
border-right: 1px dotted #999;
padding: 3px
}
img{
border-top: 4px solid #6999C7;
border-bottom: 4px solid #6999C7;
border-left: 1px dotted #999;
border-right: 1px dotted #999;
padding: 3px
}
Summary
Some simple css can liven up your images and create more consistency throughout your website. Experiment with padding and using differect values for the top/bottom and left/right borders to find what matches best with your website.
Leave a reply.