</div>
div{
display: inline-block
border:1px solid #6baabb
width:40px
height:40px
float:left
margin:0px 10px
}
a{
display: inline-block
width:40px
height:40px
background: #6baabb
}
.Round{/*圆*/
border-radius:20px
}
.LeftRound{/*左半圆*/
width:20px
border-radius:20px 0px 0px 20px
}
.RightRound{/*右半圆*/
width:20px
border-radius:0px 20px 20px 0px
}
.TopRound{/*上半圆*/
height:20px
border-radius:20px 20px 0px 0px
}
.BottomRound{/*下半圆*/
height:20px
border-radius:0px 0px 20px 20px
}
<div><a class="Round"></a></div> 全圆
<div><a class="LeftRound"></a></div> 左半圆
<div><a class="RightRound"></a></div> 右半圆
<div><a class="TopRound"></a></div> 上半圆
<div><a class="BottomRound"></a></div> 下半圆
