Archive for the 'Web Design' Category

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)

An Image with Sharp Corners

Overlay Round & White Corners

Image on a white background

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