How to Create a Border around an Image in CSS3

One of the more common changes you can make to an image in CSS3 is to add a border. This sets off the image from the other content on the page. Of course, CSS3 offers a broad range of border types. The trick is to get the border to display around the image in such a way that you can perform other tasks with that border later.

That’s where the <div> in the HTML code comes into play. It provides a container that can hold all sorts of things (such as the <div> used as a container for the <img> tag shown in the previous example) — and you can interact with that container in various ways. The following procedure helps you add a border around the image.

The majority of this style information is about the border. Adding padding to the border makes it stick out more like a frame. The float value keeps the <div> around the image, rather than having it follow the right side of the browser, when a user resizes the browser window.

If you want the image on the right side of the page, rather than the left, substitute float: right;. The entire container, image included, will reside on the right side of the page, rather than the left. As the user changes the browser window, the image will remain the same size, but it will move with the right side of the browser window.