border-radius属性可以实现元素的圆角。如下css可以实现文本框（单行、多行）的圆角：
input[type=text],textarea{border-radius:3pxborder:1px solid #000}
border-radius用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
该属性允许为元素添加圆角边框
语法：
border-radius: 1-4 length|% / 1-4 length|%
按此顺序设置每个 radius 的四个值。
如果省略 bottom-left，则与 top-right 相同。
如果省略 bottom-right，则与 top-left 相同。
如果省略 top-right，则与 top-left 相同。
单位一般用px和百分比较多，其他单位也可
这个好像很难用css做到, 不过或许可以考虑用svg做, 也可以用border-radius和背景颜色(多个元素嵌套排版)做, 不过做出的效果, 和这个区别有点大, 下面是一个例子
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
dl.xz{
background-color: #ff6000
overflow: hidden
margin: 0
padding: 0
}
dl.xz dt,dl.xz dd{
float:left
height: 40px
line-height: 40px
margin: 0
padding: 0
}
dl.xz dt{
background-color: #fff
overflow: hidden
}
dl.xz dt>span{
width:15px
float: left
height: 100%
display: block
background: #fff
}
dl.xz dt>span>span{
width:100%
height: 100%
display: block
background: #ff6000
border-top-left-radius: 15px
}
dl.xz dt>span.left{
width:60px
background-color: #ff6000
}
dl.xz dt>span.left>span{
background: #fff
border-bottom:2px solid #ff6000
border-bottom-right-radius: 30px
border-top-left-radius: 0
height: 38px
}
</style>
</head>
<dl class="xz">
<dt>
<span class="left"><span></span></span><span class="right"><span></span></span>
</dt>
<dd>测试按钮</dd>
</dl>
<body>
</body>
</html>
一般css两种写法.class{样式1:样式1样式2:样式2样式3:样式3样式4:样式4}
.class{样式1:样式1样式2:样式2样式3:样式3样式4:样式4}
另一种是
.class{样式1:样式1
样式2:样式2
样式3:样式3
样式4:样式4}
border、margin、padding这些可以缩写的标签尽量缩写。
第一种样式写出来样式表会比较小，基本没有多余代码，但是对于修改会比较麻烦一点，第二种方式有比较多的代码(回车和空格会影响文件大小，但是影响不大)，但是修改起来比较方便，然而这样竖着写有时样式太多还是容易混乱。现在还没个标准，怎么写顺手就怎么写，简洁主要在布局和使用的样式减少，而不在写法，可以多定义些共用的样式，class="样式1 样式2"可以同时使用多个样式，这样可以节省css代码，而且更清晰
