关于HTML中圆角的实现

最终效果：

                  

但是如何实现呢？

1、如果想要实现的圆角是图片的情况的话（如上图1），直接设置图片的属性为：

  -moz-border-radius: 5px;      主要针对火狐 
  -webkit-border-radius: 5px;   针对Safari、Chrome基于WebKit浏览器
  border-radius: 5px;               主要针对 IE（私有属性MS）

2、当实现圆角的对象是div之类的块状元素时，这个时候仅设置属性根本达不到要求，那如何做呢？

设计一张圆角图片来代替，如下图中点点网的实现方式：

同时说一下，如何加阴影（实在不行，就用该属性辐射出阴影，以模拟圆角，当然效果不好），效果图如下：

#column-main {
   width: 665px;
   float: left;
   border-left: dotted 0px;
   padding-left: 10px;
   border-left: dotted 0px;
   
   padding-right: 20px;
   -moz-box-shadow: 0 10px 20px #b0b3b6;    
   -webkit-box-shadow: 0 10px 20px #b0b3b6;
   box-shadow: 0 10px 20px #b0b3b6;      
}

我们在这里设置阴影，同时设置padding-right使得其偏向于右边，（注：需要设置boreder当然需要设置其宽度为0使其看不见）