使用border-bottom-left / right-radius会产生不希望的结果

Question

在下图中，我有一个圆角的形状，但仔细观察，底角有某种丑陋的重叠（某种白色角落）

我尝试在背景上使用更大的边框半径并删除背景，但看起来它不是背景而是元素本身，因为它没有做任何事情。

这是表格底部的css代码（按钮周围的灰色区域）

.formss #button_div{
    clear:both;
    height: 60px;
    width: 100%;
    border-top:1px solid #ddd;
    margin-top:5px;
    padding-top: 10px;
    text-align:center;
    background:rgba(51,51,51,0.8);
    -moz-border-radius-bottomleft: 19px;
    -moz-border-radius-bottomright: 19px;
    -webkit-border-bottom-left-radius: 19px;
    -webkit-border-bottom-right-radius: 19px;
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
}

之前我遇到过这个问题，我想继续做错事但我不知道是什么。

编辑：jsFiddle - ＆gt; http://jsfiddle.net/Z6pwR/4/

我不知道为什么文本输入超出了小提琴中的形式

Answer 1

我无法解释为什么您的解决方案无法正常工作，但如果从#agregar_instituto_div中删除overflow：hidden属性并将其添加到子/表单中，问题就会消失。

Answer 2

您需要为“.widearea”边框设置一个值。标准浏览器输入边框导致该问题。

jsfiddle.net/Z6pwR/5 /