CSS兩頭圓，是指一個元素的兩個相對邊角都呈現圓角的效果。

/* CSS兩頭圓的實現方式 */
.rounded {
border-radius: 0 10px 10px 0;
}
/* 上述代碼中，四個參數分別代表左上，右上，右下，左下四個角的圓角半徑，以像素為單位。*/
/* 兼容性寫法 */
.rounded {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* 上述代碼分別對應四個角的圓角半徑，僅是兼容性寫法，并不影響CSS的效果。*/

CSS兩頭圓在實際應用中經常用到，可以為頁面增加更豐富的視覺效果。

比如，我們可以使用兩頭圓來改善一些輸入框的UI，為其添加一個帶圓角的邊框樣式。

.input {
border-width: 1px;
border-style: solid;
padding: 8px;
border-radius: 10px;
}
/* 上述代碼中，我們設置了邊框的樣式、寬度、內邊距和圓角半徑。 */
.input.left-round {
border-radius: 10px 0 0 10px;
}
/* 上述代碼中，我們設置了左側的兩頭圓樣式。 */
.input.right-round {
border-radius: 0 10px 10px 0;
}
/* 上述代碼中，我們設置了右側的兩頭圓樣式。 */

通過上述代碼，我們就可以輕松地實現帶有兩頭圓的輸入框UI效果。