How to Add Borders to Images with CSS
April 18, 2010
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; } |