ARTICLE

Ajax rounded corners control

Posted by Rahul Kumar Saxena Articles | AJAX September 15, 2008
There is a very good control in AJAX to make rounded type shape. We can create rounded shape in many design by using Corners property of this control.
Reader Level:
 

Ajax Rounded Corners control is a very good control to make rounded type shape.
Here by using Corners property of Ajax Rounded Corner property we can design shape in many form.

Here is the ASPX code.

 
<%@ Page
Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default"
%>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<
html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>AJAX: RoundedCorners</title>  

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <div>

            <table cellpadding="0" cellspacing="0" width="50%" align="center">

                <tr>

                    <td>

                        <asp:Panel ID="PanelLogin" runat="server" Height="190px" Width="395px" BackColor="#00AEEF">

                            <div>

                                <table cellspacing="3" width="98%" align="center" style="margin: 0px 5px 0px 5px;">

                                    <tr>

                                        <td align="center" style="font-weight: bold;">

                                            AJAX: A Good Control To Make rounded Corner

                                        </td>

                                    </tr>

                                </table>

                            </div>

                        </asp:Panel>

                    </td>

                </tr>

            </table>

        </div>       

        <div>

            <ajaxToolkit:RoundedCornersExtender ID="rce" runat="server" TargetControlID="PanelLogin"

                Corners="Top" Radius="6" />

        </div>

    </form>

</body>

</html>

 

When I run the Application and I set Corners="None" Then
Corner None.JPG

When I run the Application and I set Corners="Bottom" Then

Corner None.JPG

When I run the Application and I set Corners="BottomLeft" Then

Corner None.JPG

When I run the Application and I set Corners="Right" Then

Corner None.JPG

When I run the Application and I set Corners="Top" Then

COMMENT USING

Trending up