css - bootstrap corner radius overriding my outer div panel corner -

i want rounded corners on bootstrap panels. however, when set outer div have rounded corners, overridden panel-body , panel-header 3px corners. how override this, i.e. stop body/header setting corners, rather me setting 4 corners every body , ever header?

i setting body background ligher shade of blue first, too:

.panel-body {     background: #d9edf7; } 

here 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 account?</h2></div>         <div class="panel-body">                        register here!         </div>     </div> </div> 

thanks.

add 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 account?</h2></div>          <div class="panel-body">                         register here!          </div>      </div>  </div>