In an earlier post I posted some issue with consistently creating rounded corners and was lamenting that there’s no easy way to do this using an all CSS solution. Instead I used some fairly ugly HTML with hardcoded links:

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

    <td><img src="images/Corner_ul.gif" style="height:30px;width:20px;"/></td>

    <td class="menuband" style="padding:0px;width:200px;text-align:center;">Shopping</td>

    <td><img src="images/Corner_ur.gif" style="height:30px;width:20px;" /></td>

</tr>

</table>

Two problems with this : Obviously this stuff is hardcoded and it doesn’t lend itself to theming. Specifying images in a CSS file makes the layout easier to deal with and follow a more adaptable theming/templating approach.

After some more thought on this: It can be done with CSS only although it still requires some configuration.

First a couple of assumption. I need to use images rather than one of the auto-rounding routines mentioned in the previous post, because I need to be able to overlay the rounded corners on image backgrounds. The auto-solutions that I’ve seen can’t deal with that as they sniff the background color and work with that.

Assuming I want to use images for the corners so that I can properly handle transparency I can create three style tags for the corners and the center:

.roundedcorner_ul

{

      float:left;

      display:inline;

      height:25px;

      width:20px;

      background: url(images/corner_ul.gif);

}

.roundedcorner_ur

{

      float:right;

      display:inline;

      height:25px;

      width:20px;

      background: url(images/corner_ur.gif);

}

.roundedcorner_center

{

      height:20px;

      display:block;

      text-align:center;

      padding-top:5px;

      font-weight: bold;

      margin-left:20px;

      margin-right:20px;

      background-color: #003399;

}

Note that I specify the two images and float them both to the left and right respectively. The size of the tag should match the image size exactly. The center tag then sets the margins to start rendering where the images leave off – this is so that the background color of the center div doesn’t show behind the images, so you can still get transparency.

Now to put this on the page:

<div>

    <div class="roundedcorner_ul"></div>

    <div class="roundedcorner_ur"></div>

    <div class="roundedcorner_center">Shopping</div>

</div>

While still verbose all the ugly style stuff is out of it. More importantly and maybe the main reason I want to do this is that want my images to be style sheet relative rather than application relative so the images can be picked up from the ASP.NET Theming directory rather than from an application relative location.

Using images is a bit of a pain because if you change colors of a theme you’ll need to change the image colors along with it. But in this scenario I suppose this works out Ok. 

Maybe creating a rounded corner generator HttpHandler is the way to go, generate then cache the images... left for another day <g>...