Styling Images with CSS - The USGenWeb Project

Before styling your images with CSS, you will need to add the image classes (code shown near the bottom of this page) to your CSS file. Then you can refer to these classes in image tags as shown in the examples below.

Float Left

Float an image to the left without a border:

Float Right

Float an image to the right without a border:

Float an image to the left with a border:

Float an image to the right with a border:

Float an image to the left with a border and a shadow:

Float an image to the right with a border and a shadow:

Make a square image appear to be round/oval and float it to the left. [looks square in Design view]

Make a square image appear to be round/oval and float it to the right. [looks square in Design view]

Float an image to the left and add a frame to it:

Float an image to the right and add a frame to it:

Float an image to the left and curve the corners.

Float an image to the right and curve the corners.

Float an image to the left and add padding and a light border.

Float an image to the right and add padding and a light border.

Float an image to the left and tilt it to the left.

Float an image to the right and tilt it to the right.

What about "Centering" an image?

You cannot just center an image by putting a "center" class on the image. You have to center the image in a paragraph.
Your code would look like this: <p class="center"><src="images/family.jpg"></p>

CSS coding for the image styles above

img {border: none; max-width: 100%; box-sizing: border-box;} always use this in your css
.img-border {margin: 5px 10px 0 0; border: 1px #777 solid;}
.img-catalog {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);}
.img-frame {background: #ffffff; border: 1px #aaa solid; padding: 3px; margin: 4px 1px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);}
.img-curved {border-radius: 10px; margin: 4px 2px; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-gallery {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%;}
.img-shadow {margin: 5px 0; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-round {border-radius: 50%; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-round-left {border-radius: 50%; float: left; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5); margin-right: 10px;}
.img-round-right {border-radius: 50%; float: right; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5); margin-left: 10px;}
.img-small {max-width: 150px; height: auto;}
.img-right {margin: 5px 0 0 10px; float: right;}
.img-right-shadow {margin: 5px 0 0 10px; float: right; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-rotate-right {margin: 20px; transform: rotate(4deg);}.img-right-border {margin: 5px 0 0 10px; float: right; border: 1px #777 solid;}
.img-rotate-left {margin: 20px; transform: rotate(-4deg);}
.img-left {margin: 5px 10px 0 0; float: left;}
.img-left-shadow {margin: 5px 10px 0 0; float: left; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-fullwidth {width: 100% !important;}

Remember that you can add numerous classes to the images. This option gives you the ability to customized how your images look!

Submitted by Marsha Holley

_____
Page content reviewed and/or updated by the Advisory Board 2023 Jan

Select A State

Float Left

Float Right

What about "Centering" an image?

CSS coding for the image styles above

Remember that you can add numerous classes to the images. This option gives you the ability to customized how your images look!

Quick Links

Contact Us