Adding Rounded Corners to Images Using CSS
The easiest way to make rounded corners on images is obviously by using Photoshop or other graphical software but when dealing with lots of images, this could become extremely tedious. So, what if there was a way of creating rounded corners for all your images using CSS? Well, within this tutorial I’ll show how this can be done.
Essentially though, the image is a transparent circle with the corners filled with white.
The HTML is pretty straight forward. I’m using a container for the image itself and then within this I’m including a span for each of the corners.
Next, we’ll float the container of the image so that it collapses to the width of the image and we’ll also apply a position: relative. Whilst the relative positioning doesn’t do anything at this stage, we’ll be absolute positioning the corners within the image and therefore this will provide a surrounding area for the absolute positioning to work.
With the foundations in place, we can now start to apply the positioning of the corners. You could apply all these styles to each corner but as they’ll be the same for all four corners, I’ve setup a style that applies the style to all of the span’s within the container. This applies the same width and height, same background image and tells each span that it’s going to be absolute positioned. I’ve also used font-size: 0; to kill the small height bug in IE6.
Next, we need to provide the positioning for each of the images and also change the background position to show the corner of the image that needs to be displayed.
As you’ll see from the next bit of code, it’s quite simple to position each corner in place and then using the background-position to slide the correct part of the image into view.
For IE7, Firefox, Opera and Safari, this will work absolutely fine without any problems but for IE6 there’s a slight problem where some of the corners are sitting just 1px out from where they should.
I’ve not encountered this problem before but have managed to correct this by providing absolute positioning just to IE6 which seems to fix the problem.
It’s only the bottom and right edges that seem to have the problem and there may be a better or easier fix than this one but it does seem to do the trick.
Since putting this tutorial together, I’ve spoken to Paul O’Brien and there doesn’t seem to be a simple fix for the problem (his explanation for this problem is available here: IE 1px discrepancy).
You may want to use a PNG image with transparency for smoother rounding and then use a PNG fix for IE6. I’ve opted not to for this tutorial just to keep things simple and will attempt to explain how the PNG fix works another time.
Example
Here’s an example of the kind of effect you can achieve. As you may notice, this works with any size image, small or large and will apply the rounded effect to all corners of an image, irrelevant of the dimensions.The Image
As with my CSS Rounded Corners Revisited tutorial, this guide will use just a single circular image, however due to how the transparency in the image is created, you’ll probably need to download the image and view it in a graphics package or display it on a coloured background to see how it actually works.Essentially though, the image is a transparent circle with the corners filled with white.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>Rounded Corners for a Foreground Image Using CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<div class="image">
<span class="tl"></span><span class="tr"></span>
<img src="cat1.jpg" alt="">
<span class="bl"></span><span class="br"></span>
</div>
</div>
</body>
</html>
The HTML is pretty straight forward. I’m using a container for the image itself and then within this I’m including a span for each of the corners.
CSS
To start the CSS, I’ll include some simple formating which resets padding and margin, forces scrollbars in Firefox/Opera, adds a little bit of padding for the body and also forces the images we’re dealing with to display as block as this squashes some IE bugs.* {
padding: 0; margin: 0;
}
html {
overflow-y: scroll;
}
body {
padding: 10px;
}
.image img {
display: block;
}Next, we’ll float the container of the image so that it collapses to the width of the image and we’ll also apply a position: relative. Whilst the relative positioning doesn’t do anything at this stage, we’ll be absolute positioning the corners within the image and therefore this will provide a surrounding area for the absolute positioning to work.
.image {
position: relative;
float: left;
}With the foundations in place, we can now start to apply the positioning of the corners. You could apply all these styles to each corner but as they’ll be the same for all four corners, I’ve setup a style that applies the style to all of the span’s within the container. This applies the same width and height, same background image and tells each span that it’s going to be absolute positioned. I’ve also used font-size: 0; to kill the small height bug in IE6.
.image span {
width: 16px;
height: 16px;
font-size: 0;
background-image: url(rounded-corners.gif);
position: absolute;
}Next, we need to provide the positioning for each of the images and also change the background position to show the corner of the image that needs to be displayed.
As you’ll see from the next bit of code, it’s quite simple to position each corner in place and then using the background-position to slide the correct part of the image into view.
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
background-position: 16px 0;
}
.bl {
bottom: 0;
left: 0;
background-position: 0 16px;
}
.br {
bottom: 0;
right: 0;
background-position: 16px 16px;
}For IE7, Firefox, Opera and Safari, this will work absolutely fine without any problems but for IE6 there’s a slight problem where some of the corners are sitting just 1px out from where they should.
I’ve not encountered this problem before but have managed to correct this by providing absolute positioning just to IE6 which seems to fix the problem.
* html .tr {
right: -1px;
}
* html .bl {
bottom: -1px;
}
* html .br {
bottom: -1px;
right: -1px;
}It’s only the bottom and right edges that seem to have the problem and there may be a better or easier fix than this one but it does seem to do the trick.
Since putting this tutorial together, I’ve spoken to Paul O’Brien and there doesn’t seem to be a simple fix for the problem (his explanation for this problem is available here: IE 1px discrepancy).
Summary
And that’s all there is to it. You can use any image of any size within your HTML and using this method, the images will always appear with rounded corners.You may want to use a PNG image with transparency for smoother rounding and then use a PNG fix for IE6. I’ve opted not to for this tutorial just to keep things simple and will attempt to explain how the PNG fix works another time.
Comments
Post a Comment