1.首先我们需要制作一张图片：

将图片命名为corner_tl.gif，用Gif格式保存。这张图片实际只有5px乘以5px大小，这是放大以后的效果。然后将图片旋转90度，保存为corner_tr.gif，再将图片旋转两次保存，分别命名为corner_bl.gif和corner_br.gif。

2.用div元素将内容包装好：

<div class="cat">
<div class="cat_tr">
<div class="cat_br">
<h2>日志分类</h2>
<ul>
<li>uncategorized</li>
<li>wordpress</li>
<li >任务</li>
<li>心情故事</li>
<li >游戏</li>
</ul>
</div>
</div>
</div>

3.添加CSS属性，为四个角添加背景图片。

.cat{width:280px;}
.cat h2{font-size:14px; padding:5px 0 0 10px; margin-top:5px; border-bottom:1px dashed #000;}
.cat ul{border:0px solid #fff;  padding-bottom:10px;}
.cat{background:url(images/arc_tl.gif) no-repeat top left #fd99ff;}
.cat h2{background:url(images/arc_tr.gif) no-repeat top right;}
.cat_tr{background:url(images/arc_bl.gif) no-repeat bottom left;}
.cat_br{background:url(images/arc_br.gif) no-repeat bottom right;}

完成之后的效果图如下：