Rounding Corners on Fluid-Width Portlets

The previous instructions assume that you are working with portlets that are fixed width. If you are not (or even if you are), you can use another method for rounding corners. Assuming you want to round all four corners, you would create four small images (probably best to make them all the same height and width and make sure they will line up exactly with each other) that show the rounded corner. These images will be named something like "topright.gif", "topleft.gif", "bottomright.gif", and "bottomleft.gif". Inside of your code, you would add the following:

<span class="topleft">
<span class="topright">
</span></span>
[the rest of your page template]
<span class="bottomleft">
<span class="bottomright"></span></span>

Notice the nesting, as this is very important. In this case, your images will hang off of each of the span tags.

Your CSS would then look like this:

.topleft {
	background-image:url(&dtml-portal_url;/topleft.gif);
	background-position:top left;
	background-repeat:no-repeat;
	display:block;
}

.topright {
	background-image:url(&dtml-portal_url;/topright.gif);
	background-position:top right;
	background-repeat:no-repeat;
	display:block;
}

.bottomleft {
	background-image:url(&dtml-portal_url;/bottomleft.gif);
	background-position:top right;
	background-repeat:no-repeat;
	display:block;
}

.bottomright {
	background-image:url(&dtml-portal_url;/bottomright.gif);
	background-position:top right;
	background-repeat:no-repeat;
	display:block;
}

Now, on to the rounding of the bottom corners on fixed width portlets.