How to Create Rounded Corners Textbox in Asp.Net (Using CSS)

Question

1.00/5 (1 vote)

See more:

Dear Frnds !!!

I have a Ajax WaterMark extender Textbox on my webpage. I need that Textbox corners to be Rounded.

Rounded Corners Textbox USIng CSS

Please suggest me, to create a Good looking Rounded Textbox and Buttons

Thanks.

Posted 12-May-12 20:28pm

Ranjith Reddy CSE

Add a Solution

2 solutions

Solution 1

try this:

XML

<head runat="server">
    
    <style type="text/css">
        .txtbox
        {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
    </style>
</head>

and apply the css class to textbox as:

ASP.NET

<asp:TextBox ID="TextBox1" runat="server" cssclass="txtbox"></asp:TextBox>

this definitely works.

Posted 12-May-12 20:35pm

member60

Updated 13-May-12 17:53pm

v2

Comments

Ranjith Reddy CSE 13-May-12 3:36am

this is not working

member60 13-May-12 23:55pm

check my solution once it is working.I had made mistake in specifying style tag first,that may be the reason for not working.

Ranjith Reddy CSE 14-May-12 1:39am

No Boss, This code is not Working, After Execution its shows like normal Textbox its NOT Rounded.....please suggest me a good solution...THANX.

member60 14-May-12 1:50am

fine! i don't know why it is not working at you but it shows rounded corner textbox for mine. let it be. Happy coding!

Ranjith Reddy CSE 14-May-12 1:57am

Boss, i have Tried this....its working but after i put cursor inside textbox...its shows rectangle shape at borders....its shows rounded as well as rectangle after cursor puts.

This is my code.
.TextSearch
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px;
}

member60 14-May-12 2:05am

css class given by me and shown by you are different no? i have already used .

Ranjith Reddy CSE 14-May-12 2:09am

yes Boss, ur code is working....But when i put cursor inside the textbox....its shows rounded its good and also its shows yellow color rectangle shape outside....please help me.

member60 14-May-12 2:21am

ok, try to refer :
http://webdesign.about.com/od/css/a/aa072406.htm

Ram349 27-Dec-12 5:51am

it's not working give me

adriancs 28-Apr-13 4:21am

This work on Chrome and firefox.
It does not work in Internet Explorer.

Syed Bilal Ali 13-Jan-16 11:01am

Code not Supported to Microsoft Visual Studio 2012

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2012-05-12T23:11:00

Solution 2

Since you asked just the CSS way, look here:
rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'[^]

Posted 12-May-12 23:11pm

Sandeep Mewara