圓角效果 radius
這邊要介紹使用css來製作出於圓角的效果。

也可以搭配陰影css一起使用。

首先先製作5個div有寬高及框線的區塊。

<div class="radius border"> 寬300px高50px區塊1 <br />border-radius:4px</div>
<div class="radius2 border"> 寬300px高50px區塊2 <br />border-radius:20px 10px </div>
<div class="radius3 border"> 寬300px高50px區塊3 <br />border-radius:20px 10px 0 </div>
<div class="radius4 border"> 寬300px高50px區塊4 <br />border-radius:20px 10px 0 0</div>
<div class="radius5 border"> 寬300px高50px區塊5 <br />border-radius:20px </div>

接著寫上圓角的css樣式。

div.border {
	width:300px;
	height:50px;
	border:1px solid #F30;
}
div.radius {
	-moz-border-radius:4px;		/*firfox*/
	-webkit-border-radius:4px;	/*chrome及safari*/
	-khtml-border-radius:4px;	/*chrome及safari*/
	border-radius:4px;			/*chrome及firfox及opera及safari*/
}
div.radius2 {
	border-radius:20px 10px;	/*左上右下20px及右上左下10px */
	margin-top:10px;
}
div.radius3 {
	border-radius:20px 10px 0;	/*左上20px及右上左下10px及右下0px */
	margin-top:10px;
}
div.radius4 {
	border-radius:20px 10px 0 0;	/*左上20px及右上10px及右下0px及左下0px */
	margin-top:10px;
}
div.radius5 {
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 20px;
	
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	
	-khtml-border-top-left-radius: 20px;
	-khtml-border-top-right-radius: 20px;
	-khtml-border-bottom-right-radius: 20px;
	-khtml-border-bottom-left-radius: 20px;
	
	border-top-left-radius: 20px;			/*左上*/
	border-top-right-radius: 20px;		/*右上*/
	border-bottom-right-radius: 20px;	/*右下*/
	border-bottom-left-radius: 20px;		/*左下*/
		
	margin-top:10px;
}

border-radius:4px;
表示四邊的圓角都為4px

border-radius:20px 10px;
表示左上右下的圓角為20px，右上左下的圓角為10px

border-radius:20px 10px 0;
表示左上的圓角為20px，右上左下的圓角為10px，右下的圓角為0;

border-radius:20px 10px 0 0;
表示左上的圓角為20px，右上的圓角為10px，右下左下的圓角為0;

border-top-left-radius:20px;
也可針對某一邊的圓角。

實際狀態可以參考範例。css-圓角效果範例

以下為各瀏覽器的支援程度。
-moz-border-radius 各瀏覽器支援狀態:
   
-webkit-border-radius 及 -khtml-border-radius 各瀏覽器支援狀態:
   
border-radius 各瀏覽器支援狀態: