如何讓角落只在CSS的邊界頂部圓角？

在我的網站，我需要使一個div只有在頂角的圓角。但我不知道該怎麼做。有人能幫我嗎？如何讓角落只在CSS的邊界頂部圓角？

2012-04-09 ali

什麼都嘗試設置，當你嘗試['邊框radius'（http://www.w3.org/TR/css3-background/#the-border-radius）？ – Sampson 2012-04-09 13:36:20

關於什麼構成真正的問題令人困惑。如果這不是一個真正的問題，那麼是什麼？ – 2014-07-21 18:34:27

即使在這個問題的第一個版本中，很容易看到被問到的是什麼。我同意，這不應該被關閉。 – thomasrutter 2014-07-28 03:11:13

105

布倫丹的答案是正確的，但要讓它在更多的瀏覽器渲染，你應該這樣做：

-moz-border-radius: 0px; 
-webkit-border-radius: 3px 3px 0px 0px; 
border-radius: 3px 3px 0px 0px;

2012-04-09 13:41:08 NotJay

+15

border-radius已經非常標準化了。它可以在沒有供應商前綴的所有新瀏覽器中工作。 – 2012-04-09 13:50:40

但是，您不能假定每個人都在使用新的瀏覽器。更好地覆蓋您的基地。 – NotJay 2014-08-05 15:08:54

同意 - 但你現在可以放棄'-moz-' - 已足夠長 – marksyzm 2014-12-18 23:23:45

border-top-left-radius: 3px; 
border-top-right-radius: 3px;

2012-04-09 13:37:53 Brendan

感謝您的幫助... – ali 2012-04-09 13:38:56

注意：接受的答案會在頂部放置圓角，但也會將底角改爲正方形。 – dfmiller 2015-12-09 22:24:21

其他的答案是正確的，但有是簡便的解決方案：

border-radius: 3px 3px 0 0;

將輪僅頂角，將獨自離開底部的。值的順序是順時針 - 左上角，右上角，右下角，左下角。

2012-04-09 13:40:22 Swader

我相信你知道如何正確地格式化你的代碼，以及希望提供一個完整的例子嗎？ – 2012-04-09 13:40:54

嗯..好吧，當然。添加了示例和重新格式化的答案。 – Swader 2012-04-09 22:45:49

回答