border-radius我相信對於老一輩的前端們有著特殊的感情，在經歷了沒有圓角的蠻荒時代，到如今 CSS3 遍地開花，我們還是很幸福的。然而即使到了三星大臉流行時代，border-radius在移動端的表現依舊差強人意，主要有兩點問題：

Android 2.3 自帶瀏覽器不支援 %

通常我們實現一個正圓只需要border-radius: 50%即可，大致程式碼如下：

.foo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid blue;
}

然而 Android 2.3 是不支援百分比的，要相容我們只能使用一個較大值，比如border-radius: 999px;

Android 及 Safari 低版本 img 圓角問題

當 img 元素有border 時設定border-radius 會導致圓角變形，需要在img 外面巢狀一個元素並設定border 和border-radius。Demo

Android 4.2.x 背景色溢位及不支援 border-radius 縮寫

測試發現，在 Android 4.2.x 系統自帶瀏覽器中，同時設定border-radius和背景色的時候，背景色會溢位到圓角以外部分，需要是使用background-clip: padding-box;來修復，但是如果border-color為半透明時，背景直角部分依然會露出來

Android 4.2.x 不支援border-radius縮寫

這個 BUG 在小米上測試並未發現，國外有人反映三星 Galaxy S4 中自帶瀏覽器不支援。解決方案就是使用border-radius的四個擴寫屬性，縮寫屬性放到最後。以上兩個問題影響到 Android 4.2.x 核心的系統以及在其基礎上定製的系統的自帶瀏覽器，比如：紅米，小米3，阿里雲OS 等，安卓版 Chrome 不受影響。
完整程式碼應該是這樣的：

.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}
 

其他問題

• IE9 中fieldset元素不支援border-radius。
• IE9 中帶有背景漸變(gradient)的時候背景溢位。

感謝幽默的一絲分享：

原文連結：https://github.com/yisibl/blog/issues/2