在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规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。
如果网页背景是白色的，可以设一个小的span定在想实现半角的那个地方，设置宽高为0，给设置边框 例如<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带缺角的水平菜单 </title>
<style>
#menu{ font-family:Arialfont-size:14px}
#menu a , #menu a:visited{ float:leftdisplay:blockposition:relativebackground:#c00color:#ffftext-decoration:nonepadding:6px margin:1px 0 0 1px }
#menu a span{ height:0width:0border-bottom:6px solid #c00border-left: 6px solid #fffposition:absolutetop:0left:0overflow:hidden}
#menu a:hover{ color:#333background:#f90}
#menu a:hover span{ border-bottom:6px solid #f90}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>
这个实现要加代码的。我也是前几天一个学长帮我解决的，这属于css3里面的内容，但是这个属性并非现在的任何浏览器都支持。 -moz-border-radius: 10px-webkit-border-radius: 10px
-border-radius: 10px你最好到网上搜css3，里面讲了很多有关介绍制作这种效果的例子，因为也是css3的最大特点。不过建议不要用，因为有些浏览器不支持，即使ie
