如何让角落只在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

回答