CSS - border and background for image

Images with no borders on websites really look kinda old or outdated I think, so I will show you how to style your images with a simple CSS code, which adds border and background to image.
Let's get this party started :-)




1. Define image class in CSS and border color

img.borderbg {
border:3px solid blue;
}

2. Magic part, define padding and background color, the padding does the trick.

img.borderbg {
border:3px solid blue;
padding:10px;
background:#a2a3a3;
}

3. Try it!

<img class="borderbg" src="http://www.shrani.si/f/33/4B/2HOVZHOA/thunder-resized.jpg" alt="thunder" />

And it should look like this below.





If you want to use some more magic, try CSS3 rounded corners, and the image will then look more stylish!





That's all for today. Have a nice day!