Remove part of border

Question

I have a widget which cannot be wrapped in another div.

My question is how do I remove the border from the header/title-bar but still keep it around the remainder of the DIV? Example below.

Adding a border to only .body isn't feasible because if an end-user adds padding to the bottom/top of the widget div things break.

<div class="widget">
    <div class="header">Header Title</div>
    <div class="body">My Content</div>
</div>


.widget {
    height: 100px;
    width: 130px;
    border: 3px solid blue;
    position: absolute;
    overflow: hidden;
}
.header {
    width: 100%;
    min-height: 24px;
    max-height: 24px;
    display: block;
    background-color: grey;
    color: white;
}
.body {
    width: 100%;
    height: calc(100% - 24px);
}

http://jsfiddle.net/botwfngv/

Answer 1

.widget {
    height: 100px;
    width: 130px;
    border: 3px solid blue;
    position: absolute;
}
.header {
    width: 100%;
    min-height: 24px;
    max-height: 24px;
    display: block;
    background-color: grey;
    color: white;
    margin: -3px;
    padding: 3px;
}
.body {
    width: 100%;
    height: calc(100% - 24px);
}

http://jsfiddle.net/botwfngv/2/