I managed to create rounded corners for images using CSS, thanks to the tutorial at http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/.
The key concept is to overlay 4 white and rounded images at each corner of the image. (Assuming that your website’s background color is white, of course)
To do this, you will need a DIV wrapper around the image. You’ll also need 4 inner DIVs for each corner – we’ll be using the background property to display our corner image.
You may download the corner images here.
This is the CSS:
.image_wrapper /* DIV wrapper around the image */ { position: relative; float: left; } .image_wrapper div /* set all the inner DIVs */ { position: absolute; width: 7px; height: 7px; } .image_wrapper div.topleft { background: transparent url(img/corners/topleft.png) scroll top left no-repeat; left: 0; top: 0; } .image_wrapper div.topright { background: transparent url(img/corners/topright.png) scroll top right no-repeat; right: 0; top: 0; } .image_wrapper div.bottomleft { background: transparent url(img/corners/bottomleft.png) scroll bottom left no-repeat; left: 0; bottom: 0; } .image_wrapper div.bottomright { background: transparent url(img/corners/bottomright.png) scroll bottom right no-repeat; right: 0; bottom: 0; }
Here’s the code to apply it to an image:
<div class="image_wrapper"> <img src="img/image.jpg" /> <div class="topleft"></div> <div class="topright"></div> <div class="bottomleft"></div> <div class="bottomright"></div> </div>
But its retarded to copy and paste these DIV tags for every image you have on your website. You can do the Javascript method in the original tutorial, but I prefer using PHP to generate the image code.
<?php function printImage($src) { echo '<div class="image_wrapper">'; echo '<img src="' . $src .'" />'; echo '<div class="topleft"></div>'; echo '<div class="topright"></div>'; echo '<div class="bottomleft"></div>'; echo '<div class="bottomright"></div>'; echo '</div>'; } ?>
Important: if you wish to apply margin/padding on your image do not directly apply it to the image – it will screw the rounded corners positions. Apply the margin/padding on the ‘.image_wrapper’ class instead.
.image_wrapper /* Correct */ { position: relative; float: left; margin: 10px; } img /* Wrong */ { margin: 10px; }
Click here to view the sample
or
Click here to download the whole project
Hope you learnt something from this post
Recent Comments