Montag, April 17, 2006

HTML elements with rounded corners

HTML elements up to now have always a rectangle shape. In the upcoming CSS3 standard (still a proposal) there might be also other border shapes available including rounded corners by specifying a border radius. But we do not have to wait to get this visual effect shown up.

The trick that is shown here to get the usual rectangle corners into a round shape is to use a collection of thin HTML elements to build a non rectangle border.

The simplest solution to this is to use <div> at the top and bottom and arrange them like this:

Why not using a client side solution

The Rico framework for example is offering a client-side method to round the elements:

<div id='roundDemo' style='width:300px'>Insert content here.</div>
<script>Rico.Corner.round('roundDemo', {corners:'tl br',bgColor:'#adba8c'});</script>

By using a JavaScript solution on the client to generate these elements every div element can be transformed to a rounded corner look. The disadvantage of this approach is that there is always a delay and maybe a light flickering because the page will get rendered twice because the borders will be expanded by adding the additional elements.

Why not using graphic elements

I've also seen solutions that use 4 specific corner graphics. The drawback about this approach is that the colors of these images must correspond exactly to the colors of the other html elements. If you want to change your style then you must change the images too. Again here will be a light flickering because images are often loaded after displaying the page for the first time so it doesn't look very perfect.

A server-side solution

It is also possible to generate all the additional html elements on the server. This adds some html tags and some more data to the http response when the page gets loaded but also eliminates a lot of JavaScript or images.

For ASP.NET I've written a web control that derives from asp:Panel that does the same and avoids the flickering:

<ajax:RoundedArea runat='server' id='any' width='300'>Insert content here.</ajax:RoundedArea>

You can see a live sample of it at http://www.mathertel.de/AJAXEngine/S04_VisualEffects/RoundedDemo.aspx.

Keine Kommentare: