Delete part of border

Question

I have a widget that cannot be packaged in another div.

My question is how to remove the border from the header / header, but still keep it around the rest of the DIV? An example is below.

Adding a border only to .body is impractical because if the end user adds an addition to the bottom / top of the widget, things div 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/

Answer 2

You can only get the result using CSS2, just add borders to the body , not to the whole widget :

 .widget { width: 130px; position: absolute; padding: 25px; } .header { width: 100%; min-height: 24px; max-height: 24px; display: block; background-color: grey; color: white; padding: 3px; position: absolute; top: 0; left: 0; right: 0; } .body { width: 100%; height: 100px; border: 3px solid blue; border-top-width: 0; position: absolute; bottom: 0; left: 0; right: 0; top: 30px; } 

JSFiddle Demo .