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>

# As Promised, the Article on the RoundedCorners Web Control 10/21/2009 8:26 PM ASPInsiders

In my last blog entry I mentioned how I had created a Web control that displays a box with rounded corners,

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

My Links

Ads Via DevMavens

Archives

Post Categories

 

I am a Microsoft MVP for ASP.NET.
I am an ASPInsider.
<March 2010>
SMTWTFS
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910

Comment Stats

DayTotal% of Total
Sunday 2056.8%
Monday 42514.1%
Tuesday 51917.2%
Wednesday 55518.4%
Thursday 58019.2%
Friday 54718.1%
Saturday 1886.2%
Total 3019100.0%

Hour1Total% of Total
12:00 AM 782.6%
1:00 AM 812.7%
2:00 AM 682.3%
3:00 AM 822.7%
4:00 AM 692.3%
5:00 AM 1264.2%
6:00 AM 1183.9%
7:00 AM 1816.0%
8:00 AM 1926.4%
9:00 AM 1585.2%
10:00 AM 1886.2%
11:00 AM 1936.4%
12:00 PM 2016.7%
1:00 PM 1846.1%
2:00 PM 1695.6%
3:00 PM 1354.5%
4:00 PM 1153.8%
5:00 PM 1073.5%
6:00 PM 1013.3%
7:00 PM 1073.5%
8:00 PM 923.0%
9:00 PM 882.9%
10:00 PM 913.0%
11:00 PM 953.1%
Total 3019100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 4.97159
Monday 4.80384
Tuesday 4.04477
Wednesday 7.39680
Thursday 6.26676
Friday 5.07466
Saturday 4.78177
Total 5.403019

Hour1 Entry MadeAvg.Total
12:00 AM 5.2937
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 3.8550
8:00 AM 3.72134
9:00 AM 6.06297
10:00 AM 5.63276
11:00 AM 4.22194
12:00 PM 6.16351
1:00 PM 3.09133
2:00 PM 4.89230
3:00 PM 7.64321
4:00 PM 4.00108
5:00 PM 6.07170
6:00 PM 4.64116
7:00 PM 8.95188
8:00 PM 8.63164
9:00 PM 5.00115
10:00 PM 6.31101
11:00 PM 4.5732
Total 5.403019

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


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles