Skip to main content

Borders for Images (HTML)

For HTML outputs, you can use CSS to add borders around images and sections that contain images. For example, you could add a pink dotted line around your images, like this:

Image of a space shuttle. There is a dotted pink border around the image.

To create the pink dotted line border, we used this CSS:

.mediaobject img {
    border: 3px dotted #FF1493; padding:1em;
}

Our sample CSS styling works like this:

  • The .mediaobject img defines the class we are going to style. There are different classes for the different image types, as explained in Borders on All Images (HTML).

  • border: defines the start of the border styling.

  • 3px is the width of the border line

  • dotted is the style of the border line

  • #FF1493 is the color

  • padding: defines the start of the padding styling. The padding is the space between the image and the border.

When you style your own borders, you can use similar CSS. There are other border styles you could apply too, and if you want to find out more, we recommend the w3schools website as a resource.

Note

For information on setting image borders for PDF outputs, see Borders for Images (PDF).