来源：http://www.52css.com/article.asp?id=278
我们首先需要制作四张图片备用，这四张图片，分别是：topl.gif顶部的左侧；topr.gif顶部的右侧；botl.gif底部的左侧，botr.gif底部的右侧。这四张图片分别定义在不同的背景容器里，营造出了圆角的效果。 我们来看有序列表DL的实现方法，我们看下面的XHTML代码：
Example Source Code <dl>
这是一个有序列表DL典型的代码，只是在DD标签中，我们另外加上了一个P标签。这便于我们进行四个角落的圆角背景的设置。
将顶部的左侧的背景定义在DL中；
将顶部的右侧的背景定义在DT中；
将底部的左侧的背景定义在DD中；
将底部的右侧的背景定义在DD的P中。
我们来看下面的CSS代码：
.yuanjiao {background:#06c url(topl.gif) no-repeat; }
.yuanjiao dt{background:transparent url(topr.gif) 100% 0 no-repeat; }
.yuanjiao dd{background:#DCEAFC url(botl.gif) 0 100% no-repeat;}
.yuanjiao dd p{background:transparent url(botr.gif) 100% 100% no-repeat;}
通过上面的CSS定义，我们就可以实现了DL有序列表的圆角布局的编写，我们再将代码细化一下，看看最终的运行效果：
效果1截图：
以下是效果1代码：
<!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=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {padding:0; margin:0;}
body {background:#fff;}
.yuanjiao {background:#06c url(attachments/month_0703/070304/topl.gif) no-repeat; width:380px; margin:0 auto;text-align: left; margin-top:60px;}
.yuanjiao dt{background:transparent url(attachments/month_0703/070304/topr.gif) 100% 0 no-repeat; text-align:center; color:#fff; line-height:30px; font-weight:bold; font-size: 14px;}
.yuanjiao dd{background:#DCEAFC url(attachments/month_0703/070304/botl.gif) 0 100% no-repeat; padding:0; margin:0;}
.yuanjiao p{padding: .8em;}
.yuanjiao p.last{background:transparent url(attachments/month_0703/070304/botr.gif) 100% 100% no-repeat; line-height:22px; font-size: 12px;}
a {color:#06c;}
a:hover {color:#00f;}
</style>
</head>
<body>
<dl class="yuanjiao">
<dt>我爱CSS [www.52css.com] - 自定义列表圆角</dt>
<dd>
<p class="last">我爱CSS是专业介绍学习CSS的站点。设有<a href="http://www.52css.com/">教程专区</a>，<a href="酷站欣赏</a>，<a href="模板下载</a>等。我们的网址是：<a href=">。我们将不断的努力，使我们的内容更加全面，成为你工作学习的好助手！</p>
</dd>
</dl>
</body>
</html>