有四种方法可以实现圆角。
第一、直接写CSS代码：border-radius
第二、四个圆角贴图；制作四个圆角的图片，然后用css定义
第三、直接制作整个圆角矩形背景
第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。
在HTML中把块的边框做成圆角需要利用css的border-radius属性。
操作步骤：
1、打开Adobe Dreamweaver CC 2015。
2、执行菜单栏中的"文件的新建"命令或按住Ctrl+N键打开"新建文档"对话框，选择其文档类型为HTML，单击"创建"按钮，即创建一个网页文档。
3、在<body>和</body>之间添加"<form></form>"，如下图所示。表单使用的<form>标记是成对出现的，在首标记<form>和尾标记</form>之间的部分就是一个表单。
4、在<form>和</form>之间添加"<input name="text" type="submit" value="登录" class="input_box">"，如下图所示。
5、在<head>和</head>之间添加"<style type="text/css"></style>"，如下图所示。
6、在<style type="text/css">和</style>之间添加".input_box{width:360pxheight:40pxborder-radius:20pxborder-style:nonebackground:#ec6941font-size:14pxcolor:rgba(249,248,248,1.00)}"，如下图所示。
7、保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。
语法说明
输入<input>是个单标记，必须嵌套在表单标记中使用，用于定义一个用户的输入项。
name属性：输入字段的识别名称，传递数据时的参数名称。
type属性：输入字段的类型。button是表单通用按钮。
value属性：表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。
class属性：对应于网页中的CSS选择器名称。
不用图片，只用css制作圆角的另一方法。html代码：<divclass="curvedBox"><span><spanclass="r1" ></span><spanclass="r2" ></span><spanclass="r3" ></span><spanclass="r4" ></span></span><divclass="content">Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems. </div><span><spanclass="r4" ></span><spanclass="r3" ></span><spanclass="r2" ></span><spanclass="r1" ></span></span></div>css代码： ody{background-color:#000}.curvedBox{width:300pxmargin: 2510px auto 0}.curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{background-color:#fffdisplay:blockoverflow:hiddenheight:1pxfont-size:1px}.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{border-width:0 1pxborder-left:1px solid #fffborder-right:1px solid #fff}.curvedBox .r1{margin:0 6px}.curvedBox .r2{margin:0 3px}.curvedBox .r3{margin:0 2px}.curvedBox .r4{margin:0 1pxheight:2px}.curvedBox .content{background:#fffborder-left:1px solid #fffborder-right:1px solid #fffpadding:0 5px}这个方法其实并不完美，其实只是利用了”无限接近”的一个概念。看放大后的图的话，可以很清楚地看到锯齿状。锯齿其实把图片放大足够地倍数地话，也能看到锯齿，不过放大地倍数得相当大了。将 r1 r2 r3 r4 层叠起来，利用它们 margin（left/right） 的改变以及 border(left/right)，来实现这个近似的效果。理论上，如果 rn 足够多的话，效果就会无限趋近圆弧。不过话又说回来了，多加这么多的标签和css的话，在效率上必然会存在问题，也说不上就比用图片好到哪里去。所以说，这只是提供一个思路，到底怎么用，用在哪里，还得因地制宜。
