aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Monday, June 4, 2012 Total Views:  

In this example you will see how to apply round corner using jquery plugin with out using images on asp.net server controls like textbox, dropdownlist and divs. You can download jquery corner plugin from here. Jquery corner plugin also provides different pattern, corner style, size, match, adornment and effects that you can apply.

Let see the example.

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

    <title>jquery corner plugin</title>

    <style>

        select, input

        {

            padding: 5px;

            border: 1px solid #ccc;

            width: 200px;

        }

       

        div.corn

        {

            border: 1px solid #f00;

            padding: 10px;

            width: 200px;

            height: 100px;

        }

    </style>

<script type="text/javascript"
 src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script type="text/javascript"
 src="http://malsup.github.com/jquery.corner.js"></script>

    <script type="text/javascript">

        $(function () {

            $(".corn").corner("round 5px");

        });

    </script>

</head>

<body>

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

    <div>

        <p>

            FullName:

            <asp:TextBox ID="TextBox1" runat="server" class="corn"></asp:TextBox>

        </p>

        <p>

            Gender

            <asp:DropDownList ID="dd1" runat="server" class="corn">

                <asp:ListItem>Select</asp:ListItem>

                <asp:ListItem>Male</asp:ListItem>

                <asp:ListItem>Female</asp:ListItem>

            </asp:DropDownList>

        </p>

        <p>

            <div class="corn">

                Jquery Round corner plugin

            </div>

        </p>

    </div>

    </form>

</body>

</html>

Output

Demo

See live demo

Download

Jquery-round-corner.aspx (1.65 kb)

Protected by Copyscape Online Plagiarism Tool

Comments (3) -

Aubrey Greenlaw
Aubrey Greenlaw United States
6/28/2015 4:58:17 PM #

Wow that was odd. I just wrote an really long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again. Regardless, just wanted to say wonderful blog!|

Reuben Davda
Reuben Davda United States
6/28/2015 5:02:41 PM #

You really make it seem so easy with your presentation but I find this matter to be actually something which I think I would never understand. It seems too complicated and extremely broad for me. I am looking forward for your next post, I will try to get the hang of it!|

Toney Steinbaugh
Toney Steinbaugh United States
7/13/2015 7:34:23 AM #

I am not sure where you're getting your information, but good topic. I needs to spend some time learning more or understanding more. Thanks for fantastic info I was looking for this info for my mission.|

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5