RoundedCorners control – how does it really work?
ASP.NET Ajax toolkit has many cool controls, one of them is the RoundedCorners control. I think any ASP.NET developer meets the problem of how to create a control with rounded corners sometime during his career. Most of us solve this issue using images by creating 4 images , one for each corner. Here is a good example of how to achieve this using image and table.
There is another solution that is not yet cross browser one. there is the css 3 new upcoming feature for giving each control a raduis. Mozilla already supports it and calls it “moz-border-radius”, I even wrote about it in my blog:CSS 3 new amazing feature - border radius. But what I want to discuss today is another cool solution that is actually cross browser one. The RoundedCorners control that is available in the ASP.NET AJAX toolkit.
Let's say we have a simple div control:
<div id="test" style="background-color:Red;width:200px;height:200px;">
aaa
</div>
That looks like this:
and we want to make it rounded. Here is the server RoundedCorner control definition to achieve this:
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
TargetControlID="test" Color="red"
Radius="6"
Corners="All" />
(and naturally I added a script manager to the page and added the “Register” directive as well).
The result is this:
So how does the control work:
As it turns out, the control does not use any images , it does it using a very nice technique. If you look at the source code that is created for our div ( using any tool, I used the IE 8 developer tool bar) you will see the following code:
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 3px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 3px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 2px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 2px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 1px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 0px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 0px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 0px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 0px" __roundedDiv="true"></DIV>
<DIV style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: red; WIDTH: 100%; HEIGHT: 200px; BORDER-TOP: medium none; BORDER-RIGHT: medium none">aaa </DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 0px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 0px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 0px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 0px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 1px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 2px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 2px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 3px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 3px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 6px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 6px" __roundedDiv="true"></DIV></DIV>
All the control is doing is simply adding some div controls above it and under it. (The above divs are for the top corners and the bottom divs are for the bottom corners) And all that is changing between all these divs is the margin-left and margin-right property. which means each div is a simple 1 px height control that follows by another div that is longer and so on….
Amazing and simple right?
The problem with this control is that i does not support 2 colors, which means that if you have a div that it’s upper side is in one color and the bottom side is in another color, you simply have to do it manually.