Scott on Writing

Musings on technical writing...

A Web Control for Displaying Rounded Corner Tables

A common Web UI element among profressionally-designed Web sites is that of a table with rounded corners.  To see what I mean, just check out the boxes on the left-hand side of Amazon.com, or the boxes on the left-hand side on DataWebControls.com.  Creating such a rounded corner interface isn't terribly difficult.  Essentially, you use a graphics editing program to create the rounded corners.  Then, use an HTML <table> with three columns to display the left corner, the middle, and the right corner.

If you're anything like me, you find using graphics editing programs synonymous with a root canal.  I'm just not a artsy kind of guy.  Anywho, I created a Web control that utilizes GDI+ to dynamically create those rounded corners for you, and will be writing up an article on 4Guys showing how to use the custom server control and the code behind it.  For now, you can marvel at these live demos.  I'll post an entry here once the 4Guys article is up (hopefully by late afternoon tomorrow).

(I'll leave you with a teaser: the dynamically generated images (which are only created on-demand, and actually saved on the Web server's file system so that they aren't created every time someone views the page) are GIF files that use a transparent palette color and employ quantization in order to increase the quality of the GIF and decrease the file size.  These two issues are what took up the vast majority of the time in creating the control... more on these topics in the coming 4Guys article!)

posted on Monday, July 26, 2004 7:39 PM

Feedback

# re: A Web Control for Displaying Rounded Corner Tables 7/26/2004 8:58 PM will

That's pretty sweet! But I can't wait to see the CSS rendering engine in IE support the border radius param...

moz-border-radius: 5px

# re: A Web Control for Displaying Rounded Corner Tables 7/27/2004 5:13 AM brady gaster

ah man. now that's going to be a good article. can't wait to read it!

# re: A Web Control for Displaying Rounded Corner Tables 7/27/2004 5:39 AM Jeffrey Palermo

I'd like to see a smoother corner and some anti-aliasing added. If you compare the corners of Amazon.com to this control, Amazon's are perfectly smooth, but yours look a bit course. I'm sure some tweaking would fix it. I regularly use photoshop to make small UI tweaks like this. I find it very easy.

# re: A Web Control for Displaying Rounded Corner Tables 7/27/2004 6:17 AM ron

i personally think that using css and a few divs is a lot cleaner looking that having to use a table. tables can get messy when going through a redesign of your site, and can be a hassle when they are nested.

here's an excellent article on how to use css to create those corners

http://kalsey.com/2003/07/rounded_corners_in_css/

# re: A Web Control for Displaying Rounded Corner Tables 7/27/2004 7:07 AM Milan Negovan

Roger Johansson had a couple of interesting posts about it. Here's one: http://www.456bereastreet.com/archive/200406/flexible_box_with_custom_corners_and_borders/. It's a simple technique of using CSS and a couple of images.

Just my ($1.00-98c).

# re: A Web Control for Displaying Rounded Corner Tables 7/27/2004 8:53 AM Justin Lovell

Here is the cat out of the bag: the one issue about the GIF optimizing can be addressed by setting the resolution of the paletes to 72. (By default, .NET uses 96).

The file system "part" is... well... you know me Scott; pretty boring :-).

# As Promised, the Article on the RoundedCorners Web Control 7/27/2004 8:56 PM Scott on Writing

# Now it supports template 8/3/2004 10:25 PM bill xie

I am exciting about this control. So I have made effort to change it into a template server control.

http://www.codeproject.com/useritems/bxTemplateRC.asp

# re: A Web Control for Displaying Rounded Corner Tables 8/4/2004 9:25 PM Scott Mitchell

Bill, nice job turning it into a templated control. This will likely be obsolete, though, as I'm going to be releasing an update to the RoundedCorners control where you can just put the content to appear in the within the control tags, similar to the Panel Web control. That is, you could do:

<skm:RoundedCorners ...>
This is a list of products:<br />
<asp:DataGrid ... />
</skm:RoundedCorners>

Title:  
Name:  
Url:
Protected by Clearscreen.SharpHIPEnter the code you see:
Comments   

Add To Your Reader

My Links

Archives

Post Categories

 

I am a Microsoft MVP for ASP.NET.
I am an ASPInsider.
<May 2008>
SMTWTFS
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Comment Stats

DayTotal% of Total
Sunday 1866.8%
Monday 37913.9%
Tuesday 45316.7%
Wednesday 50418.5%
Thursday 53519.7%
Friday 49418.2%
Saturday 1666.1%
Total 2717100.0%

Hour1Total% of Total
12:00 AM 652.4%
1:00 AM 682.5%
2:00 AM 622.3%
3:00 AM 742.7%
4:00 AM 572.1%
5:00 AM 1033.8%
6:00 AM 1084.0%
7:00 AM 1585.8%
8:00 AM 1716.3%
9:00 AM 1475.4%
10:00 AM 1716.3%
11:00 AM 1816.7%
12:00 PM 1886.9%
1:00 PM 1696.2%
2:00 PM 1605.9%
3:00 PM 1324.9%
4:00 PM 1073.9%
5:00 PM 923.4%
6:00 PM 913.3%
7:00 PM 963.5%
8:00 PM 833.1%
9:00 PM 782.9%
10:00 PM 792.9%
11:00 PM 772.8%
Total 2717100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 5.54144
Monday 5.22339
Tuesday 4.28419
Wednesday 7.67637
Thursday 6.90607
Friday 5.48411
Saturday 5.33160
Total 5.842717

Hour1 Entry MadeAvg.Total
12:00 AM 5.0035
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 7.0035
8:00 AM 5.35107
9:00 AM 6.32278
10:00 AM 6.47246
11:00 AM 4.41181
12:00 PM 6.88330
1:00 PM 3.00111
2:00 PM 5.41222
3:00 PM 8.64285
4:00 PM 4.0589
5:00 PM 5.92154
6:00 PM 4.52113
7:00 PM 9.67174
8:00 PM 9.80147
9:00 PM 5.05111
10:00 PM 5.4265
11:00 PM 4.5732
Total 5.842717

Learn More About Comment Stats
1 - All times GMT -8...


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles