• Articles and Tutorials
• Contact

Css dynamic round image corners

This is really an alternative way of making rounded corners on images online.

I think this way is unique, I have never seen people making rounded corners on images this way, or tutorial on doing it this way, so I made it my self.

There are good and bad things about my way of doing things.

The bad thing is, you cant right click the image and get its properties etc.

The good thing about that is, it gives a small copyright protection, (people cant right click your images and choose save image, they would only get the frame).

First I will explain how this method works so you can understand what we are about to do.

We will have our images, all at the same size, I made mine 140 x 110 px.

Then we will make another image using Photoshop, this image will be a png or gif file, because those formats supports transparency, only graphic shown will the the four rounded corners, and thats what we need, because we will put the image in our html file, then position the transparent image on top of it.

Now down to business, we will start by making an image 140 x 110 px in Photoshop, just open the image and go to image -> image size and give it settings as shown below.

Now we will make the image to go on top of our image, it has to be the same size as our image, 140 x 110 px.

Start with a white background layer, then draw a rounded rectangle shape in a new layer, resize it to fit in our stage. Hold down ctrl and click the layer in the layers panel to load the selection, now you can delete the rounded rectangle again, we only needed the selection.

So select the white background layer and hit delete and you will end up with only four corners and a transparent middle. Now save the image as png24 supporting transparent. (ps you can download the project files at the bottom).

Now to the code part.

To make this easy I only used 1 html file and placed the css code in the html file, (usually I would use an external css file to separate code).

Place your html file in the same folder as your image and your frame image from before.

Write the following code in your html file and save it. Explanations will be in the code be make it easier to understand as we follow.

//Remember to put these styles in the header section between   tags as you can see from the project files
//Now the last part is to define our objects, first a div container surrounding the content. then our image, and remember to give it the id specified in the styles
//finally the frame image, just placed next to our content image, because we have already positioned it within our styles.

Download the project file here.

I really hope you learned something here, I did, some of you might think why all the when you can just go to Photoshop and give all your images rounded corners. The answer is, if you have 1000 thumbnail images and want to give them rounded corners, that might take time, and what if you only needed the rounded corners for one way of presentation it, and in another place you want the original, then this "dynamic" way is better. I worked for me.