Html 如何仅在 css 中边框的顶部使角变圆？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10074023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make corners rounded only on the top part of the border in css?
提问by ali
In my site I need to make a div have rounded corners only on the top corners. But I don't know how to do this. Can someone help me?
在我的网站中，我需要让一个 div 只在顶角有圆角。但我不知道如何做到这一点。有人能帮我吗？
回答by NotJay
Brendan's answer is correct, but to get it to render in more browsers, you should use this:
Brendan 的回答是正确的，但要让它在更多浏览器中呈现，您应该使用：
-moz-border-radius: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
回答by Brendan
border-top-left-radius: 3px;
border-top-right-radius: 3px;
回答by Swader
The other answers are correct but there is the shorthand solution:
其他答案是正确的，但有速记解决方案：
border-radius: 3px 3px 0 0;
which will round only the top corners and leave the bottom ones alone. The order of the values is clockwise - top left, top right, bottom right, bottom left.
这将只圆顶角而留下底部的角。值的顺序是顺时针 - 左上角、右上角、右下角、左下角。
Here's an example: http://jsfiddle.net/9sXWf/
这是一个例子：http: //jsfiddle.net/9sXWf/
