CSS边框半径出血深色

Question

我有一个包含框，有一个border-radius然后我有一个容器内也有一个border-radius设置的元素，它对接框的边缘。

容纳箱是“大出血”，围绕内部框的边缘：

你可以看到它在这里的行动：http://jsfiddle.net/Shpigford/RUAMx/

我怎样才能解决这个问题？

Answer 1

很容易修复设置容器边境更大半径：

div { 
    background:white; 
    border-radius: 5px 8px 8px 5px; 
} 

看到这里http://jsfiddle.net/RUAMx/2/

此外，您不必使用-webkit和-moz preffixes了，对border-支持半径是good enough。

Answer 2

解决方案的一个只是移动锚标记了一下，像这样的http://jsfiddle.net/RUAMx/3/

a { 
    color:white; 
    float:right; 
    display:block; 
    background:#201f23; 
    padding:10px 20px; 
    -webkit-border-top-right-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    margin-right: -5px; 
} 

，并在锚使用5px的弥补这个-5px到的div容器

div { 
    background:white; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    margin-right: 5px; 
}