Collapsible Panel & Rounded Corners

Collapsible Panel & Rounded Corners using only CSS

Design 1:

<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="ContentPanel"
CollapsedSize="0" Collapsed="false" ExpandControlID="TitlePanel" CollapseControlID="TitlePanel"
AutoCollapse="False" AutoExpand="False" ScrollContents="false" TextLabelID="Label1"
CollapsedText="Show Details..." ExpandedText="Hide Details" ImageControlID="Image1"
ExpandDirection="Vertical" />
<div style="width: 50%;">
<asp:Panel ID="TitlePanel" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3"></b><b class="g_round4">
</b></b>
<div class="gradientheader" id="DIV1" style="">
<asp:Label ID="Label1" runat="server" Width="100%">Show Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<div class="contentborder">
<asp:Panel ID="ContentPanel" runat="server" >
<p>
Here your content goes...
</p>
</asp:Panel>
</div>
</div>

Design 2:

<ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="Server" TargetControlID="Panel10"
CollapsedSize="0" Collapsed="false" ExpandControlID="Panel9" CollapseControlID="Panel9"
AutoCollapse="False" AutoExpand="False" ScrollContents="false" TextLabelID="Label6"
CollapsedText="Show Details..." ExpandedText="Hide Details" ImageControlID="Image1"
ExpandDirection="Vertical" />
<div style="width: 50%;">
<asp:Panel ID="Panel9" runat="server">
<b class="roundtop"><b class="g_round1"></b><b class="g_round2"></b><b class="g_round3"></b><b class="g_round4">
</b></b>
<div class="gradientheader" id="DIV5" >
<asp:Label ID="Label6" runat="server" Width="100%">Show Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<div class="contentnoborder">
<asp:Panel ID="Panel10" runat="server" >
<p>
Here your content goes...
</p>
</asp:Panel>
</div>
<b class="roundbottom"><b class="g_round4"></b><b class="g_round3"></b><b class="g_round2"></b><b class="g_round1">
</b></b>
</div>

CSS Styles:
/* ROUNDED CORNERS - Grey border + Gradient Header*/
.roundtop, .roundbottom
{
display: block;
background: transparent;
font-size: 1px;
}
.round1, .round2, .round3, .round4, .noround, .g_round1, .g_round2, .g_round3, .g_round4
{
display: block;
overflow: hidden;
}
.round1, .round2, .round3, .noround, .g_round1, .g_round2, .g_round3
{
height: 1px;
}
.round2, .round3, .round4, .g_round2, .g_round3, .g_round4
{
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.round1, .g_round1
{
margin: 0 4px;
background: #ccc;
}
.round2, .g_round2
{
margin: 0 2px;
border-width: 0 2px;
}
.round3, .g_round3
{
margin: 0 1px;
}
.round4, .g_round4
{
height: 2px;
margin: 0 0px;
}
.noround
{
background: #ccc;
margin: 0 -1px;
}
.contentborder, .contentnoborder, .gradientheader
{
display: block;
width: 100%;
overflow: hidden;
margin: 0 -1px;
}
.contentnoborder, .gradientheader
{
border: 0 solid #ccc;
border-width: 0 1px;
}
.contentborder
{
border: solid 1px #ccc;
}
.content
{
margin: 0 -1px;
border: solid 1px #ccc;
}
.gradientheader, .g_round1, .g_round2, .g_round3, .g_round4
{
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#2099CCFF', EndColorStr='#FF99CCFF');
}
References:
http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
http://www.asp.net/learn/ajax-videos/video-89.aspx