在css中，让边角具有弧度只需要用border-radius这个属性。
如图，这是一个测试页面，它们的边角分别为25PX和50PX半径的圆角。
写法像这样：
border-radius:25px
测试代码如下
<div style="border-radius:25px"></div>
<div style="border-radius:50px"></div>
div{
width:200px
height:130px
background-color:wheat
margin-bottom:10px
}
拓展资料-css3简介在CSS3推出前，圆角效果需要用图片实现，下面简要介绍CSS3。
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。
这个好像很难用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>
这是哪个奇葩的面试官，太简单了吧，边框可以有5种形状（以CSS3为标准）
正常情况下，边框为长方形和正方形，例如border：1px solid #eee
但是CSS3引入了新的属性border-radius后，可以将边框定义为圆角边框或者圆形边框以及不规则圆形边框.
具体形状要看长宽与border-radius所赋的值
