CSS Rounded Corners

CSS Rounded Corners – Using only one image file!

There are lots of tutorials on this subject, yet most of the one’s you see require the use of four separate images, which means a lot of fiddly photoshop work; cutting, pasting, naming and saving – all times four.

This method will still need four divs, but it will utilise just one non-symmetrical image, aligned (i.e. not split) as indicated in this diagram:

As you can see the layout of the divs is not typical of the traditional four-image method, but rather there is one huge wrapping div with two small divs fixed in the top-right and bottom-left corners and the content-containing div aligned to the bottom right corner.

Therefore the HTML will look like this, (notice the lack of recursive nesting):

<div id="top_left">
	<div id="top_right"></div>
	<div id="bottom_left"></div>
	<div id="bottom_right">
		Hello there, I'm some content. 
	</div>
</div>

And here is the the heart of the CSS (note the alignment attributes in the background properties):

#top_left{
	background: url(image.jpg) top left no-repeat;
	padding-top: 6px;
	padding-left: 6px;
	position: relative;
}
#top_right{
	background: url(image.jpg) top right no-repeat;
	width: 6px;
	height: 6px;
	position: absolute;
	right: 0%;
	top: 0%;
}
#bottom_left{
	background: url(image.jpg) bottom left no-repeat;
	width: 6px;
	height: 6px;
	position: absolute;
	left: 0%;
	bottom: 0%;
}
#bottom_right{ /*This is where the actual text goes*/
	background: url(image.jpg) bottom right no-repeat;
}
 

Notes

• The top-left div provides the top-left rounded corner and the top and left borders – thus the need for padding of equal size to the size of the top-right and bottom-left divs. This padding in the top and left sides prevents the bottom-right div from obscuring the wrapping div’s borders and corner.

• The two small divs in the top-right and bottom-left just provide rounded corners.

• Absolute positiong is needed for the two small divs – remember that to absolutely position a div, its parent div must be assigned relative position.

• The bottom-right div actually contains the content text or picture. It provides both a rounded corner and the right and bottom borders. It is also responsible for stretching the top-left-wrapping-div to size.

• Interestingly this method can be used to display a non-symmetrical detail in the bottom-right corner.

• Here’s another approach to rounded corners with a single image but using a slightly different method.

CSS for MSIE before version 7

#top_left{
	background: url(image.jpg) top left no-repeat;
	padding-top: 6px;
	padding-left: 6px;
	position: relative;
	height: 100%; /*This causes absolute positioning to work properly*/**
}
#top_right{
	margin-right: -1px; /*Adjusts a small offset*/**
	background: url(image.jpg) top right no-repeat;
	width: 6px;
	height: 6px;
	position: absolute;
	right: 0%;
	top: 0%;
}
#bottom_left{
	margin-bottom: -1px; /*Adjusts a small offset*/**
	background: url(image.jpg) bottom left no-repeat;
	width: 6px;
	height: 6px;
	position: absolute;
	left: 0%;
	bottom: 0%;
}
#bottom_right{ /*This is where the actual text goes*/
	background: url(image.jpg) bottom right no-repeat;
}