Image Borders 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;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s