round corner Textbox purely using CSS

by: gawaiPosted on 2009-09-18 at 12:29:46ID: 25369187

well your code only works with FF
anyway try this one

<style>
input
{
        -moz-border-radius-bottomleft:5px;
        -moz-border-radius-bottomright:5px;
        -moz-border-radius-topleft:5px;
        -moz-border-radius-topright:5px;
        background-color:#FFFFFF;
        border:1px solid #E9E9E9;
        padding: 2px 7px 0px 7px;
        width:29em;
        height:5em;
        font-size : 11px;
		font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
 
}
 
</style>
<input name=text value="hi this is test">

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

Select all Open in new window

by: tahlequahitguysPosted on 2009-09-18 at 15:07:36ID: 25370382

I would even suggest simplifying your CSS3 down. Use one line for -moz-border-radius: 5px; and that will do all four corners automatically.

Also, add -webkit-border-radius in as well for browsers like safari. And, for semantics for if/when IE comes around, add border-radius as well so that it will work later after CSS3 is fully supported by all browsers.

Now if you wanted to do different corners at different raidii, use -moz-border-radius: 5px 6px 7px 8px;

This will change the set top-left at 5 and work it's way around clockwise. The same way it works there, it will also work in -webkit-border-radius.

<style>
input {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#FFFFFF;
	border:1px solid #E9E9E9;
	padding: 2px 7px 0px 7px;
	width:29em;
	height:5em;
	font-size : 11px;
	font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
 
</style>
 
<input name=text value="hi this is test">

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

Select all Open in new window

by: vivekthangaswamyPosted on 2009-09-18 at 23:57:07ID: 25371804

Hi gawai & tahlequahitguys

I tried both the suggestion but the font size, color and font family is not reflecting...

I am trying for FF browser only..

I would like to set the font size matching the textbox height...

Even I font-size : 30px; it shows as in the screenshot I have uploaded in the question... please help...

by: gawaiPosted on 2009-09-19 at 01:26:39ID: 25372058

I gave u the code after i tested in FF on my pc. Thats works just fine.

<style>
input {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#FFFFFF;
	border:1px solid #E9E9E9;
	padding: 2px 7px 0px 7px;
	width:29em;
	height:5em;
	font-size : 11px;color:#fff000;
	font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
 
</style>
 
<input name=text value="hi this is test">

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

Select all Open in new window

box.jpg
- 11 KB
demo

by: vivekthangaswamyPosted on 2009-09-19 at 07:26:49ID: 25373144

this is what I did and .. result is in screenshot

.rounded-textbox 
{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color:#FFFFFF;
	border:1px solid #E9E9E9;
	padding: 2px 7px 0px 7px;
	width:33em;
	height:5em;
	font-size : 30px;
	color:#a51713;
	font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
 
<input name="text" class="rounded-textbox" value="hi this is test">

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

Select all Open in new window

tc2.JPG
- 15 KB
screenshot

by: vivekthangaswamyPosted on 2009-09-19 at 07:27:43ID: 25373145

see the font size I given is font-size : 30px;

but it shows very small...

by: tahlequahitguysPosted on 2009-09-21 at 07:21:22ID: 25383108

Sorry vive, but I concur with gawai.

Attached is the code I have and the outcome in FF 3.0.14.

If you are having problems with it, you might try saving this CSS as it's own file and then seeing if you get the same results. If you do then there may be an issue with your FF, what version are you using? But, if you do get the correct result in the separate file, most likely there is some conflicting CSS associated with your text box.

Let us know how it goes.

<style>
input {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color:#e3e3e3;
	border:1px solid #000;
	padding: 2px 7px 0px 7px;
	width:29em;
	height:5em;
	font-family : verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	font-size : 20px;
	color: #FF9900;
}
 
</style>
 
<input name=text value="hi this is test">

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

Select all Open in new window

EE.png
- 19 KB
outcome

by: gawaiPosted on 2009-09-21 at 12:17:41ID: 25386485

in my code the size is 11 thats y it was small. Its not the victory but use of common sense of the asker.
The points should have split atleast.

by: tahlequahitguysPosted on 2009-09-28 at 06:36:59ID: 25439191

Agreed! Gawai was the first to respond and there was nothing wrong with his initial response anyhow.

by: vivekthangaswamyPosted on 2009-10-06 at 01:44:01ID: 31630641

This is not 100% solution... partially it will work

Question

round corner Textbox purely using CSS

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Cascading Style Sheets (CSS)

Hypertext Markup Language (HTML)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press