Saturday, November 15, 2008

Rounded Corners

Rounded Corners using only CSS
Design 1:

<div style="width: 50%;">
<asp:Panel ID="Panel1" 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" >
<asp:Label ID="Label2" runat="server" Width="100%">Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="contentborder">
<p>
Your content goes here...
</p>
</asp:Panel>
</div>

Design 2:

<div style="width: 50%;">
<asp:Panel ID="Panel3" 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="Div2" style="margin: 0 -1px;">
<asp:Label ID="Label3" runat="server" Width="100%">Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<asp:Panel ID="Panel4" runat="server" CssClass="contentnoborder">
<p>
To communicate with Microsoft's Web Development Customers, to know as much as I
can about all web development technologies, those made by Microsoft and those made
by everyone else, and to communicate from the world to the Web development product
teams and from the web development product teams to the development community.
</p>
</asp:Panel>
<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>
Design 3:

<div style="width: 50%;">
<asp:Panel ID="Panel5" 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="Div3" style="margin: 0 -1px;">
<asp:Label ID="Label4" runat="server" Width="100%">Details...</asp:Label>
</div>
<b class="roundbottom"><b class="noround"></b></b>
</asp:Panel>
<asp:Panel ID="Panel6" runat="server" CssClass="contentnoborder">
<p>
To communicate with Microsoft's Web Development Customers, to know as much as I
can about all web development technologies, those made by Microsoft and those made
by everyone else, and to communicate from the world to the Web development product
teams and from the web development product teams to the development community.
</p>
</asp:Panel>
<b class="roundbottom"><b class="round4"></b><b class="round3"></b><b class="round2">
</b><b class="round1"></b></b>
</div>

CSS Styles:
CSS classes are defined in the following post
http://vrreddy.blogspot.com/2008/11/collapsible-panel-rounded-corners.html

No comments: