Border-radius 允許你使用CSS建立圓角而不需要使用圖片或者是JavaScript。如果你還沒有使用這個的話，請看看這個教程。

對文件不感興趣？直接看一下演示吧。

圓角

從歷史上來說，圓角通過背景圖片和JavaScript實現起來相當棘手 。互動設計師會經常感到無奈，網頁設計師也會為此倍感糾結。這種問題將不再存在!

全部圓角

現在你可以很容易的使用CSS3來建立圓角。目前不同的瀏覽器之間還存在一些差異，但是我相信最終這個句法會標準化的。要新增圓角，你只需要這樣:

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius:10px;  
 

這就是所有需要做的。Firefox之前在渲染圓角的時候確實有些問題，不過它現在已經修復了，所以你儘可以放心使用。

更多控制

你也可以控制某一個單獨的角，將其應用為圓角。這次不同的瀏覽器之間的程式碼仍然有些許不同，所以你仍然需要分別列出。

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 20px;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 20px;

/* W3C syntax */
border-top-left-radius: 20px;  
border-top-right-radius: 0;  
border-bottom-right-radius: 0;  
border-bottom-left-radius:  20px;  
 

瀏覽器支援

Border-radius 在Firefox 2、Firefox 3、 Safari、 Chrome、IE9+和相關的Gecko和Webkit 核心的瀏覽器中均被支援.

所有的IE版本瀏覽器和Opera 尚不支援圓角，所以這些使用者看到的將是直角。

Demo

你可以通過這裡檢視演示, 或者在Github上下載原始檔