How to: CSS Image Borders
Here is a quick and simple tutorial on how to give your images a matted border look using Cascading Style Sheets (such as the one you see of this fine young beauty).
- Give your image a class name, such as
- Add the following code to your CSS file:
border:1px solid black;
Ta da! You should now have an image with a 4 pixel, white matte and a one pixel, black border.
Okay so this is a very basic tutorial and “The Madness” might not be an appropriate sub-header, but oh-the-well. Here’s a brief explanation of what all of this does.
padding:4px;This bit of code essentially pushes the outer boundaries of the image beyond the actual physical images limits, so a 20px square image essentially takes up 28px square space (but doesn’t in any way distort the image).
background:white;The extra space created by the padding is transparent and will show through to the background of whatever element the image sits inside, unless we set a background color.
border:1px solid black;This simply adds the outside border. Feel free to change the solid value to dotted, dashed, double, grooved, or any other valid piece of CSS.
Up Next: Hopeful Wiimote Wishing