mathertel -> AJAXEngine -> Visual Effects -> 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:
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.
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.
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>
This gets rendered as:
You can specify the border and background colors on the tag as you can with the normal <asp:panel> object. The border-width will always be 1px (see below).
The source code for this web control can be found in ~/App_Code/VEControls/RoundedArea.cs (view source).
The rounded effect is created by using a collection of div elements at the top and at the bottom of the inner div element that holds the content. All these div elements are grouped together by using an outer div element that has no border and no padding.
Have a look at the client side html code to find all these div elements.
Printing is still a kind of problem because a standard setting of the browsers is that background-colors are not rendered for printing. Because of this there is a problem using <div> elements with 1px height and using the background-color to draw the border. These kind of border-lines will not get printed and html printing should look good too. Therefore I do only use the border feature of the <div> elements to render the border and so I need a <div> element with 0px height when drawing borders thicker than 1px. The problem is that IE 6.0 does not render these elements correctly. Firefox does.
This is a plain HTML written RoundedArea:
This RoundedArea is constructed on the server using a ASP.NET web control:
This is a plain HTML with a thicker border showing the print-problem when printing background colors is disabled:
This page is part of the http://www.mathertel.de/AJAXEngine/ project. For updates and discussions see The AJAX Engine blog.