How to Create a Border around an Image in CSS3 - dummies

How to Create a Border around an Image in CSS3

By John Paul Mueller

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.

  1. Create a new CSS file with your text editor.

    Your editor may not support CSS files. Any text file will do.

  2. Type the following CSS style information.

     border-style: groove;
     border-width: thick;
     border-color: gray;
     padding: 5px;
     float: left;

    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.

  3. Save the file as SimpleGraphics.CSS.

  4. Add the following code to the <head> area of the HTML file.

    <link rel="stylesheet" href="SimpleGraphics.CSS" />

    This code creates the link between the HTML file and the CSS file.

  5. Save the HTML file and reload the page.

    You see the border.