css - 暗い色の 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のプレフィックスを使用する必要がなくなり、border-radiusのサポートで十分です。

Answer 2

解決策の1つは、この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;
}