How to Create Rounded Image Borders

In this tutorial I’ll provide a rundown of how you can add visually appealing borders to your images (like those you’ll see throughout this tutorial) using CSS. The image borders don’t have to be round, in fact they can be anything you want them to be (as they’re based on an image). To come right out in the open, this tutorial requires your images to be a fixed width and height, which you’ll define in the stylesheet. Of course, if you want a variety of image sizes on your site, you can always create multiple CSS classes. For the purposes of this tutorial, we’ll be creating a border for a 100px x 100px image.

1. Create a Background Image using your favorite image editing software. I’ll use Photoshop to create the images’ border, which will be implemented as a background image.
   1. Open a New Document and give it an image size of 139px x 139px.
   2. Using the Shape tool or your own creative hand, fill the entire area with some type of background. You can see the image I created here.
   3. Save the image as an image that can be used on the Web (probably a jpg or a gif).
2. Resize the Main Image, so that it is exactly 100px x 100px square. We’re talking about the actual image you want to use, not the background image that will serve as its border. This step is not completely necessary, as the CSS will force your image to the right size anyway, but using CSS to size an image often gives it a compressed look.
3. Create the CSS that will put all of this in action.
1. Add the following to your CSS file:
.imgborder {
background:url(filename) no-repeat;
padding:20px;
width:100px;
height:100px;
}
2. You’ll want to replace the filename bit there with whatever the name of your image is (don’t forget to put in the path to your directory if the image isn’t in the same location as your page’s file.)
4. Add the Image to Your Site. Your code should look something like this:
   <img class="imgborder" src="filename" />>

Again, you’ll want to replace the filename text with the name of your actual file.

Customizing the Image

Of course, unless your site looks exactly like mine, you’ll probably want to customize this to suit. If you’re familiar with CSS, I’m sure you can go to town with this, but here are a few of the possibilities:

• Adjust the padding:20px; to give your image a thinner or thicker border. For every pixel you increase your padding, you’ll need to decrease your main image’s height and width (or increase your background image’s), and vice versa.
• If you want the image to float to the right of your image, like the images on this site do, add float:right; to the CSS.
• You may also need to work with clear:right;, clear:left; or clear:both; in your CSS as well, depending on how your other tags are set up.

I got the idea for how to do this from Olivia Meiring at Yummy Wakame. Of course, I didn’t steal her code though so tongues out to her. 🙂

Up Next: Fairly Balmy