ブートストラップコーナー半径が外側のdivパネルコーナーをオーバーライドしています

Question

私はブートストラップパネルに角を丸くします。しかし、角を丸くするように外側のdivを設定すると、3pxのコーナーでパネルボディとパネルヘッダーでオーバーライドされます。これを無効にするにはどうすればいいですか？つまり、ボディとヘッダーの四隅をすべて設定するのではなく、コーナーの設定からボディ/ヘッダーを停止しますか？

私も、青色の最初のligher陰ように身体の背景を設定しています：ここで

.panel-body { 
    background: #d9edf7; 
} 

は、HTMLは

<div class="panel-group"> 
    <div class="panel panel-info" style="-moz-border-radius: 12px; 
    -webkit-border-radius: 12px; 
    -ie-border-radius: 12px; 
    -opera-border-radius: 12px; 
    -chrome-border-radius: 12px; 
    border-radius: 12px;"> 
     <div class="panel-heading"><h2>Don't have an account?</h2></div> 
     <div class="panel-body"> 
         register here! 
     </div> 
    </div> 
</div> 

のおかげです。

Answer 1

overflow: hidden

.panel-body { 
 
    background: #d9edf7; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel-group"> 
 
    <div class="panel panel-info" style="-moz-border-radius: 12px; 
 
    -webkit-border-radius: 12px; 
 
    -ie-border-radius: 12px; 
 
    -opera-border-radius: 12px; 
 
    -chrome-border-radius: 12px; 
 
    border-radius: 12px; overflow: hidden;"> 
 
     <div class="panel-heading"><h2>Don't have an account?</h2></div> 
 
     <div class="panel-body"> 
 
         register here! 
 
     </div> 
 
    </div> 
 
</div>