Bootstrap Panel Border-Radius

Question

I have a page with 2 bootstrap panels that each contain bootstrap dropdown menus. The panels had overflow:hidden set which was cutting off the dropdown menus when they were opened. To fix this I removed the overflow:hidden value from the .panel div and this resolved the problem.

This causes another problem however with the .panel-heading div which now overlaps it's parent .panel div. I have a 4px border-radius set on the .panel div but this is overlapped by the .panel-heading div when the panel is closed. I have tried setting a 4px border-radius on the .panel-heading div, then used javascript to toggle a class which removes the bottom border-radius when the panel is opened which does seem to work, but i would prefer to use a CSS solution if possible?

HTML

 <div class="panel-group" id="accordion">
 <div class="panel panel-default">

 <div class="panel-heading radius">
 <a class="search-toggle collapsed" data-toggle="collapse"  data-parent="#accordion" href="#collapse1">Search</a></div>

    <div id="collapse1" class="panel-collapse collapse">
    <div class="panel-body">
    <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Yes/No</a>
    <ul class="dropdown-menu">
    <li><a data-value="Yes">Yes</a></li>
    <li><a data-value="No">No</a></li></ul>
    </div></div></div></div></div>


    <div class="panel-group" id="accordion">
    <div class="panel panel-default">

    <div class="panel-heading radius">
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Search</a></div>

    <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">

    <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Number </a>
    <ul class="dropdown-menu">
    <li><a data-value="1">1</a></li>
    <li><a data-value="2">2</a></li>
    <li><a data-value="3">3</a></li></ul>
     </div></div></div></div>

CSS

.panel-group .panel{border-radius:4px}
.panel-heading{border-radius:4px;padding:10px 15px}
.removeradius{border-bottom-left-radius:0px;border-bottom-right-radius:0px}

JS

$(".radius").click(function(){
    $(".panel-heading").toggleClass('removeradius');});

JSFiddle

http://jsfiddle.net/81u6gwbf/

Answer 1

Selecting previous siblings isn't possible without javascript. You can try a workaround like this, but not sure the has() selector works on all browsers

/*This matches all .panel-heading elements with direct child with class .collapsed*/
.panel-heading:has(> .collapsed) {border-radius:4px;} 
.panel-default > .panel-heading{background-color:blue;border-bottom-left-radius:0px;border-bottom-right-radius:0px;padding:10px 15px}

Fiddle here

Answer 2

I just use img-rounded on panel class... like this:

<div class='panel panel-default img-rounded'>

...

that gives me a nice rounded border on panels.