边框圆角效果

border-radius是向元素添加圆角边框.

使用方法:

div{
    height:100px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:10px;/*所有的角都使用半径为10px的圆角*/
}

div{
    height:100px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:5px 4px 3px 2px;/*四个半径值分别是左上角.右上角.右下角.左下角,顺时针*/
}

实心上半圆：把高度设为宽度的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也可以)

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}

  
  

实心圆:
把高度和宽度的值设置为一样的，并且把四个圆角的值都设置为他们值的一半
div{
    height:100px;/*与width设置一致*/
    width:100px;
    background:#9da;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
   
   


   
   

虚线空心圆:

div{
    height:100px;/*与width设置一致*/
    width:100px;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    border: 3px #9da dashed;
}

实线空心圆：

div{
    height:100px;/*与width设置一致*/
    width:100px;
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
    border: 3px #9da solid;
}

border-radius值的单位也可以用百分比或em，只不过目前兼容性不好.