How to Add Borders to Images with CSS

Sometimes, a website design benefits when images have frames – or borders. One way to get them is one image at a time, using a graphics program. But there is a much faster way – with CSS!

This code:

<img src="image.jpg" width="350px" height="262px" 
alt="Rusty Stove in Luckenbach, Texas">

inserts a plain image into your page:

And if we add this to our CSS:

img {
border-color: #7d6b72;
border-style: solid;
border-width: 5px;
}

Then our image appears like this:

Actually, I would use shortcuts and write my CSS like this:

img {
border: 5px solid #7d6b72;
}

Tags:

This post was written by:

This entry was posted on Sunday, April 18th, 2010 at 9:22 pm and is filed under CSS Basics, CSS Misc, Killer CSS Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

3 Responses to “How to Add Borders to Images with CSS”

  1. I;m seriously in love with CSS, it’s magical! I love adding borders to images, great post.

  2. PrasoonV says:

    Excellent

  3. Jendel says:

    Simple and Easy to Understand thanks a lot =)