CODEWITHSUNDEEP
csstwitter-bootstrap
Neil Walker
Neil Walker

Reputation: 6858

bootstrap corner radius overriding my outer div panel corner

I want rounded corners on my bootstrap panels. However, when I set the outer div to have rounded corners, they are overridden by panel-body and panel-header with their 3px corners. How do I override this, i.e. stop the body/header from setting corners, rather than me setting all four corners for every body and ever header?

I am setting the body background to be a ligher shade of blue first, too:

.panel-body {
    background: #d9edf7;
}

Here is the 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>

thanks.

Upvotes: 2

Views: 1251

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

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

Upvotes: 2

Related Questions