border-radius 圆角

border-radius:3px;  参数的单位可以使绝对的像素px，也可以用相对单位%;

　　　　　　　　　　参数顺序是左上角，右上角，右下角，左下角.

圆角：

div{width: 100px;height: 100px;border: 1px solid #6c6;border-radius: 50%;}

不同设置：

div{
    width: 100px;
    height: 100px;
    border: 1px solid #6c6;
    border-radius:20px 0 0 0;
    border-radius:20px 20px 0 0;  /*2*/
    border-radius:20px 20px 20px 0;/*3*/
   border-radius:0 20px 0 20px;  /*4*/
}

 过渡效果：

.hex{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow:0 0 0 1px #ccc inset;
    transition:box-shadow 0.5s linear;
}
.hex:hover{
    box-shadow: 0 0 0 16px #039 inset;
}