Click here to Skip to main content
13,404,844 members (44,013 online)
Click here to Skip to main content
Add your own
alternative version


67 bookmarked
Posted 18 Sep 2007

Create an ASP.NET Rounded Panel WebControl

, 25 Sep 2007
Rate this:
Please Sign up or sign in to vote.
A custom WebControl that emits CSS to create a stylable ASP.NET panel with rounded corners.
Screenshot - RoundedPanel.jpg


There are perhaps hundreds of ideas on the internet regarding how to make those sleek rounded "Web 2.0" panels (as depicted above) that can be seen on millions of websites these days. Undoubtedly, there are many server controls that do the same thing. I've seen some good, and most bad. This was my attempt at creating a sleek solution to what certainly should be a simple problem.


Because there is no one "right" answer to making rounded corners, I opted for what I deemed to be the simplest and highest performance solution. From a scalability standpoint, it didn't make sense to have to do it with images. While I'm a fan of JavaScript, I wanted to plan for the times when the client has JavaScript turned off. Sure, it's rare, but it happens. Finally, I wanted to encapsulate all of this functionality into a drag-n-drop server control that would require minimal configuration in Visual Studio and, of course, be cross-browser compliant.

Because I'm no CSS genius, I looked around on the web to find a few solutions that did what I wanted to do. I really just wanted pure CSS, and, as I said above, no images or JavaScript. I found exactly what I wanted on Stu Nicholls' website, CSSPlay. He had an elegant CSS solution that seemed like it would work well inside of a web control. And, since he didn't mind anyone using his code, I thought this would be the best approach. Thanks, Stu!

Inside the Code

The control itself contains only five properties and one overridden method. I allow the user to configure the Panel Border Color, Panel Text Color, Panel Inner Background Color, Panel Outer Background Color and the text inside of the panel. Sure, you can nest controls in the panel (it inherits from the ASP Panel control), but sometimes you don't want to have to configure a label control. Setting the text makes it simpler.

The method simply overrides the RenderContents method to output the CSS I needed nested in style tags, and the divs and nested tags that comprise the panel. I changed the CSS to reference elements by its unique Client ID, so it becomes feasible to have several panels on a page that have varying styles (as in the screenshot above). All the rest of the design functionality is inherited from the Panel control, including visibility.

On a final note, I made sure to render any child controls between paragraph tags. It makes the final panel rendering nice and neat. Yes, you can also use output.WriteBeginTag("p"); if you so choose. I like output.Write();

if (HasControls())

Using the Code

I included the output DLL (Web2Controls.dll) in the downloadable source as well as the code file. You can simply add it to your toolbox, drag the control on your page, and start adding nested controls. All of the properties are located under the "Rounded Panel" category, and have defaults set. The panel also accounts for differing height and width units. You can use percentages or pixels with either. Because it inherits its designer attributes from the Panel control, you won't get a graphic representation of the panel (color and style wise) until you run it. It will simply display as any Panel would, and you can drag or drop controls on it.

I tested this in IE6, IE7 and Firefox, and didn't have any problems. I don't have Opera or Safari installed locally, so if any of you test with those platforms, I'd be interested to hear your results.

Happy UI'ing!


  • 9/25/07 - Removed a stray paragraph tag that was in for testing
  • 9/22/07 - Added closing div tag to output rendering


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Product Manager iMobile3
United States United States
I have worked professionally in IT since 2004, and as a software architect since 2008, specializing in user interface design and experience, something I am still extremely passionate about. In 2013 I moved into management, and since then I've held positions as Director of Product Development, Director of Engineering, and Practice Director.

You may also be interested in...


Comments and Discussions

GeneralWhy the label cannot show inside the rounded panel Pin
Yee Cheing Seah24-Jun-09 19:12
memberYee Cheing Seah24-Jun-09 19:12 
GeneralRe: Why the label cannot show inside the rounded panel Pin
Yee Cheing Seah25-Jun-09 19:15
memberYee Cheing Seah25-Jun-09 19:15 
GeneralRe: Why the label cannot show inside the rounded panel Pin
wasanaeng4-Aug-09 9:15
memberwasanaeng4-Aug-09 9:15 
GeneralRe: Why the label cannot show inside the rounded panel Pin
Member 415218429-Jun-11 1:18
memberMember 415218429-Jun-11 1:18 
GeneralFix Rendering Child controls bug Pin
dreammaker_tr27-Nov-07 4:42
memberdreammaker_tr27-Nov-07 4:42 
GeneralNested Controls not working for me Pin
rlax3115-Nov-07 3:04
memberrlax3115-Nov-07 3:04 
GeneralRe: Nested Controls not working for me Pin
Steven Szelei11-May-10 21:07
memberSteven Szelei11-May-10 21:07 
QuestionBorder Width Pin
Ben Millspaugh23-Oct-07 8:03
memberBen Millspaugh23-Oct-07 8:03 
AnswerRe: Border Width Pin
UsualDosage23-Oct-07 9:08
memberUsualDosage23-Oct-07 9:08 
QuestionData Binding Problem Pin
Ben Millspaugh23-Oct-07 7:49
memberBen Millspaugh23-Oct-07 7:49 
GeneralRe: Data Binding Problem Pin
stixoffire14-Dec-07 3:04
memberstixoffire14-Dec-07 3:04 
GeneralProblems with Updatepanels Pin
Wayne Gibson16-Oct-07 0:06
memberWayne Gibson16-Oct-07 0:06 
GeneralRe: Problems with Updatepanels Pin
stixoffire14-Dec-07 3:00
memberstixoffire14-Dec-07 3:00 
GeneralReally nice idea, but... Pin
intooitive25-Sep-07 4:02
memberintooitive25-Sep-07 4:02 
GeneralRe: Really nice idea, but... Pin
UsualDosage25-Sep-07 5:58
memberUsualDosage25-Sep-07 5:58 
GeneralRe: Really nice idea, but... Pin
intooitive25-Sep-07 9:08
memberintooitive25-Sep-07 9:08 
GeneralRe: Really nice idea, but... Pin
UsualDosage25-Sep-07 10:27
memberUsualDosage25-Sep-07 10:27 
GeneralQuestion on Foregroundcolor Pin
DaProgramma25-Sep-07 3:29
memberDaProgramma25-Sep-07 3:29 
GeneralRe: Question on Foregroundcolor Pin
UsualDosage25-Sep-07 6:00
memberUsualDosage25-Sep-07 6:00 
GeneralDoes not render properly Pin
DaProgramma24-Sep-07 11:40
memberDaProgramma24-Sep-07 11:40 
GeneralRe: Does not render properly Pin
UsualDosage24-Sep-07 12:09
memberUsualDosage24-Sep-07 12:09 
GeneralRe: Does not render properly Pin
DaProgramma24-Sep-07 20:44
memberDaProgramma24-Sep-07 20:44 
GeneralRe: Does not render properly Pin
UsualDosage25-Sep-07 3:14
memberUsualDosage25-Sep-07 3:14 
GeneralRe: Does not render properly Pin
DaProgramma25-Sep-07 3:26
memberDaProgramma25-Sep-07 3:26 
GeneralPanel clash with DropDownList Pin
MohammadHafizullah23-Sep-07 16:21
memberMohammadHafizullah23-Sep-07 16:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01-2016 | 2.8.180212.1 | Last Updated 25 Sep 2007
Article Copyright 2007 by DreamInHex
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid