CSS作為前端開發的必備技能之一，與網頁設計息息相關。在進行網頁布局時，常常因各種原因我們需要設置邊框圓角，但實際上CSS只提供了4個圓角（border-radius屬性），而很少有人知道CSS還支持上下倒圓角的設置。下面我們就來具體了解一下如何實現上下倒圓角的效果。

首先，我們需要用到的是border-top-left-radius和border-top-right-radius兩個屬性。這兩個屬性是用來控制左上和右上的圓角。

.box{
width:200px;
height:200px;
border:1px solid #666;
border-bottom:none;
border-top-left-radius:50% 200px;
border-top-right-radius:50% 200px;
}

其中，50%表示橢圓的長軸是邊框的一半，200px則是短軸的長度。這樣，我們就可以設置上下倒圓角的效果了。

完整代碼如下：

.box{
width:200px;
height:200px;
border:1px solid #666;
border-bottom:none;
border-top-left-radius:50% 200px;
border-top-right-radius:50% 200px;
}

最后的效果如下：

以上就是使用CSS實現上下倒圓角的方法，希望能對大家有所幫助。