Preview HTML Documents on a Cellphone, Tablet, or Laptop in Dreamweaver
How to Apply CSS3 Effects and Transforms in Dreamweaver
How to Create a Media Query in Dreamweaver

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.

  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.

blog comments powered by Disqus
Create a New Style Sheet in the CSS Styles Panel
CSS Code Hinting in Dreamweaver
How to Work with CSS3 Modules
How to Find the CSS3 for a Library or Generator
How to Create ID Styles in Cascading Style Sheets (CSS)