Image Borders/CSS

Adding borders in any color and several styles to your photos are just a couple of the things you can do with CSS. This Tutorial only begins to touch on the subject of images and CSS, but the basics is always a good place to start.

Adding Borders

To add a border to a photo, you will use the border property. Possible values are "border-width", "border-style" and "border-color". Using the "border" property alone is shorthand for setting the width, style, and color of an element border. The "border" property can only set all four borders; only one border width, style and color may be given. To give different values to an element's four borders, you must use one or more of the "border-top", "border-right", "border-bottom", "border-left", "border-color", "border-width", "border-style", "border-top-width", "border-right-width", "border-bottom-width", or "border-left-width" properties.

Solid Borders

To add a simple 1pt black border:

<img src="img/photo.jpg" alt="Sample Photo" style="border: 1px solid #000000;">

By adding "padding" you can add some space between the photo and the border, or add a border and background color:

<img src="img/photo.jpg" alt="Sample Photo" style="border: 1px solid #000000; padding: 4px;">

<img src="img/photo.jpg" alt="Sample Photo" style="border: 1px solid #000000; padding: 4px; background-color: #cccccc;">

Styled Borders

The values for "border-style" include dotted, dashed, solid, double and groove. Some of these styles do not look right using small border sizes. You will need to experiment to get the effect you are looking for.

<img src="img/photo.jpg" alt="Sample Photo" style="border: 1px dashed #000000; padding: 5px;">

<img src="img/photo.jpg" alt="Sample Photo" style="border: 2px dotted #ff6600; padding: 4px;">

<img src="img/photo.jpg" alt="Sample Photo" style="border: 6px groove #b2b367;">

Different Sized Borders

The example below is a little extreme, but its purpose is to demonstrate how you can give each side of an element different border styles.

<img src="img/photo.jpg" alt="Sample Photo" style="border-top: 2px dashed #000000; border-right: 4px dotted #b2b367; border-bottom: 2px solid #b2b367; border-left: 2px dotted #ff6600; padding-top: 4px; padding-right: 4px;">

Aligning Images and Text

With the float: x; property you can align your image left or right with your text. Using the margin: x; property allows you to put extra space between the image and text.

Sample Image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sagittis volutpat ipsum. Fusce vitae diam et tellus tempor varius. Quisque nibh ligula, mollis id, accumsan eget, mattis eu, dui. Nam placerat enim et nulla. Fusce rutrum dolor non nulla.

<p><img src="img/image_resize.gif" alt="Sample Image" style="border: 1px solid #000000; padding: 3px; float: left; margin-right: 6px; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sagittis volutpat ipsum. Fusce vitae diam et tellus tempor varius. Quisque nibh ligula, mollis id, accumsan eget, mattis eu, dui. Nam placerat enim et nulla. Fusce rutrum dolor non nulla.<br clear="all"></p>

<p><img src="img/image_resize.gif" alt="Sample Image" style="border: 1px solid #000000; padding: 3px; float: right; margin-left: 3px; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sagittis volutpat ipsum. Fusce vitae diam et tellus tempor varius. Quisque nibh ligula, mollis id, accumsan eget, mattis eu, dui. Nam placerat enim et nulla. Fusce rutrum dolor non nulla.<br clear="all"></p>

To Top TO TOP