How to: CSS Image Borders

Oh, Ms. Livia, how dooooo you do?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).

The Method

  • Give your image a class name, such as class="matted".
  • Add the following code to your CSS file:
    .imgborder {
    background:white;
    padding:4px;
    border:1px solid black;
    }

Ta da! You should now have an image with a 4 pixel, white matte and a one pixel, black border.

The Madness

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