Regardless of what some people say, there is one area of rounded corners that hasn’t been dealt with much and that is rounding the corners of images. Before, if you wanted to round an image’s corners, you’d have to open it up in photoshop (or whatever image editor you use) and fix it up there. But no more…

See the demo
Download Rounded Images

Just add water

If you wish to just use Rounded Images right out of the box, extract the zip file and you will find scripts.js, index.html (a sample page), four .gifs, and a .PSD.

The four .gifs are made for a white background, but if you’re going to be including the image over a background other than white you can edit the .PSD to your own liking. To do so, first change the color of Color Fill 2 to match the background of your page, then rotate and save the image until you have all four corners. To rotate the image, simple go to Image –> Rotate Canvas –> 90° CW. You can show Color Fill 1 to help you see the curve so you know what way it is facing, but make sure it’s invisible before you save. Save the corners as topleft.gif, topright.gif, bottomleft.gif, and bottomright.gif.

Now upload the entire roundedimages folder into your root directory (so that it can be accessed from /roundedimages).

On the page where you wish to round an image’s corners, include the following in your header:


<script type="text/javascript" src="/roundedimages/scripts.js"></script>
<link rel="stylesheet" href="/roundedimages/style.css" type="text/css" />

Now wrap the image you wish to round with a div having the id of imagewrapper.

That’s it, you’re done. If you want more than one image rounded on the same page, read on.

Under the hood

So here’s how it works. First, we start with our XHTML:


<div id="imagewrapper">
   <img src="bla.jpg" alt="An image of something." />
   <span class="curve1"></span><span class="curve2"></span><span class="curve3"></span><span class="curve4"></span>
</div>

We need the four spans as style hooks for our four corners, and the imagewrapper div will be needed to help position these.

So first we need to get our imagewrapper ready to position the other spans inside it.


#imagewrapper {
position: relative;
float: left;
}

Since it’s postioned relatively, we can then absolutely position the corners around it.


#imagewrapper span {
position: absolute;
z-index: 2;
height: 12px;
width: 12px;
}

.curve1 {
background: transparent url(/roundedimages/topright.gif) top right no-repeat;
top: 0;
right: 0;
}

.curve2 {
background: transparent url(/roundedimages/topleft.gif) top left no-repeat;
top: 0;
left: 0;
}

.curve3 {
background: transparent url(/roundedimages/bottomright.gif) bottom right no-repeat;
bottom: 0;
right: 0;
}

.curve4 {
background: transparent url(/roundedimages/bottomleft.gif) bottom left no-repeat;
bottom: 0;
left: 0;
}

That’s all the CSS required. However, the 4 extra spans in our XHTML look a little messy, so let’s clean it up with some JavaScript:


window.onload = function() { ES.Round.create('imagewrapper'); }

var ES = new Object();

ES.Round = {
create  :  function(wrapper) {
  for(var i = 1; 4 >= i;  i++) {
  var curve = document.createElement('span');
  curve.className = 'curve'+i;
  var target = document.getElementById(wrapper);
  target.appendChild(curve);
  }
  }
}

That’s it. If you want more than one image rounded, you can just call ES.Round.create(wrapper) where wrapper is the name of the div surrounding the image to be rounded (just remember to edit your CSS file accordingly).

So download the package, have fun, and if you actually use this I’d love to see it. swan