How to Style an Image with CSS

Learn how to make text wrap around a floated image with CSS.

How to Style an Image with CSS. Use CSS to present your website's images in the best possible way. In this article, you'll learn where to place an image and whether or not to include decorations such as borders.

Floating and Centering

Step 1

Insert your image on the page with your usual method. Don't forget to include suitable alt text for the image.

Step 2

To make your text wrap around the image on the right, similar to the way it is in the photo introducing this article, use a CSS rule like this:

img { float: left; padding-right: 1em; }

The float:left rule makes the image move to the left margin. The padding-right rule keeps the text from bumping right up against the right side of the image. If a border was added to this image, padding would come between the image and the border. See Section 2 to work with an image with a border.

Step 3

To make the text wrap on the left, float the image on the right margin. Use a rule like this:

img { float: right; padding-left: 1em; }

Step 4

To center an image you must first make the normally inline image element into a block level element.

img { display: block; }

Step 5

Next, add margins to the left and right of the image to center it. The proper value for the left and right margins to center anything is auto.

img { display: block; margin-right: auto; margin-left: auto; }

The image floats to the right margin and the text wraps around on the left.
A block level element is centered with margin rules.

Borders and Margins

Step 1

Borders can be used to create a drop-shadow effect or the appearance of a frame.

To create a thick, frame-like border using the groove border style, a rule like this can be used:

img { float: left; border-width: 1em; border-style: groove; border-color: #000000; }

Other border styles are solid, dotted, dashed, double, ridge, inset and outset. Width can be expressed in pixels, ems, or percentages.

Step 2

Borders can be applied selectively to the top, right, bottom and left of the image. You can use this knowledge to create an effect like a drop shadow.

Step 3

Using a solid border in 2 shades of gray on just the right and bottom border, you get a drop shadow effect.

img { float: left; border-right-style: solid; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-color: #999999; }

Step 4

Margin is outside the border. Adding some margin on the right and bottom of the image will prevent the text from bumping against it.

img { float: left; border-right-style: solid; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #999999; margin-right: 1em; margin-bottom: 1em; }

With a border on all 4 sides of the image, you create a frame.
Borders on only 2 sides look like a drop shadow.
Create a margin around the image to give it some whitespace.

Things You'll Need

  • A basic knowledge of HTML and CSS

  • A web page with images in need of styling help

  • Nothing new is needed for this section


If you have images in more than one division (div) of a page, use descendant selectors to style them individually. Possible selectors: #content img, #sidebar img, #feature img.