怎样用css把文本框变成圆角？

怎样用css把文本框变成圆角？？怎么办？？大家有没有高招啊？？是在html中其实在jsp中也行！！！要具体点，咱是个初学者哈！！谢咯！！

9 个解决方案

#1

一般美工为了好看会在css中设置背景图，背景图是圆角
样式控制最好在css文件中，不要写在html中

#2

我网上找的例子



<!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>

<title>CSS圆角阴影边框</title>

<style type="text/css" media="screen,print">

*{padding: 0; margin: 0;}

body {background-color:#fff; margin: 10px; padding: 0;}

html body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}

html>body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}

p, table, ul, dl, h2 {font-size: 1.2em}

caption {font-size: 1.4em}

h3 {

color: #cfcfcf;

	font-weight: bold;

	text-transform: capitalize;

	margin-top:30px;

	padding-bottom:10px;

}

a:link {color: #CC6633;}

a:visited {color: #CC6633;}

a:hover {color: #999966;}

a:active {color: #CC6633;}

a:focus{color: #CC6633;}

		.portletcontent {

		padding:0 7px 0 0;

		background:#fff url(/upload/jscss/demoimg/borders.gif) 100% 0 repeat-y;

	}

	.bi {

		padding:0 0 0 1px;

		background:#000 url(/upload/jscss/demoimg/borders.gif) 0 0 repeat-y;

	}

	.bb {

		height:30px;

		margin:0 -7px 0 -1px;

		background:url(/upload/jscss/demoimg/box.gif) 100% 100% no-repeat;

	}

	.bb div {

		width:18px;

		height:30px;

		background:url(/upload/jscss/demoimg/box.gif) 0 100% no-repeat;

	}

	.portlet h2 {

	height:20px;

	padding:0 0 0 10px;

	background-color:#666;

	background-image:url(/upload/jscss/demoimg/topright.gif);

	background-position:right top;

	background-repeat:no-repeat;

	color:#592C16;

	line-height:20px;

	}


	.portletcontent p {

		padding:8px 10px 8px 10px;

		background:#fff;

	}

	</style>


	</head>

<body>


<h3>Custom box with no width restrictions. Height restriction is based on the amount of content.</h3>

<div class="portlet"><!-- Start Portlet -->

<h2 style="background-color:#E5E5D8;">text</h2>

<div class="portletcontent"><div class="bi">

<!-- Visual Content for Portlet below -->

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>

<div class="bb"><div></div></div>

</div>

</div><!-- End Portlet Content-->

</div><!-- End Portlet -->

<h3>Custom box set to fill 50% (width) of the viewable window regardless the size of the browser window.</h3>

<div class="portlet" style="width:50% "><!-- Start Portlet -->

<h2 style="background-color:#E5E5D8;">text</h2>

<div class="portletcontent"><div class="bi">

<!-- Visual Content for Portlet below -->

<p>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

</p>

<div class="bb"><div></div></div>

</div>

</div><!-- End Portlet Content-->

</div><!-- End Portlet -->


<h3>Custom box set to have a fixed width of 300 pixels.</h3>

<div class="portlet" style="width:300px "><!-- Start Portlet -->

<h2 style="background-color:#E5E5D8;">text</h2>

<div class="portletcontent"><div class="bi">

<!-- Visual Content for Portlet below -->

<p>

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

</p>

<div class="bb"><div></div></div>

</div>

</div><!-- End Portlet Content-->

</div><!-- End Portlet -->

</body></html>

#3

好像是用个圆形的图片给遮起来吧

#4

border-radius: 6px;

需要浏览器支持css3 如何火狐4+和ie9+

其他的只能用背景图片了

#5

就是用css，我也不怎么清楚，希望大家在好好看看，二楼那个代码我试过了，不是我要得圆角，嘿嘿，不过同样感谢啊！！再找找！！

#6

最好放弃，圆角的css效率极差，远不如图片来得简单又容易

#7

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.txtCSS{

border:0px;

height:20px;

background:url(images/powered_by.png) no-repeat;

padding:4px

}

</style>

</head>


<body>

<input type="text" name="textfield" id="textfield" class="txtCSS" />

</body>

</html>

#8

原理很简单。

一个带有圆角的图片上面，放个没有边框的input即可。

#9

话说，有个非常强大的jquery插件。
http://www.malsup.com/jquery/corner/

#1