How to get round corner textbox using jquery without images

Question

I try to get round corners for textbox. But how can i get it. Here is the class

.tbox
{
 float:left;
 width:200px;
 margin-top:10px;
 margin-left:10px;

}

when i call using jquery using

$('.tbox').corners("4px");

it is not working. I already included Jquery.js and jquery.corners.js. But its not working. Any help would be appreciated

Answer 1

You can add following class to the textbox for rounded corner:

class="text ui-widget-content ui-corner-all"

Hope this would help you.

Answer 2

You can make a rounded corner div and inside that place a text box with no borders. I think this will be the easiest way to accomplish your need.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>

<script>
    $(document).ready ( function () {
        $("#div1").corner("round");
    });
</script>

<style>
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; }
#txtBox { width: 180px; height: 20px; background-color: transparent; position: relative; top: 5px; left: 10px; border-style: none; }
</style>


<div id="div1">
    <input type="text" id="txtBox" />
</div>