Remove the boundary where the two divisions intersect

Question

I attach the border of two divisions and delete the border where two divisions intersect but are not deleted. I tried this code.

<div style="border:solid 1px #CCC; margin: 15px 0px 0px 350px; border-bottom:none; padding:12px 12px 8px 12px; border-radius:5px 5px 0px 0px; width:300px; text-align:center;"> <strong style="font-size:18px; color:#000">ABC</strong> </div> <div style="width:968px; float:left; margin:0px 15px 15px 15px; border: solid 1px; border-color:#CCC; border-radius:10px;"> Hello </div> 

Can someone help me solve this error.

jsFiddle: http://jsfiddle.net/9XFDp/1/

Answer 1

Just raise the top div 1px from top and use some background-color or even border-bottom in order

Demo

Added the following properties to the div header

 position: relative; top: 1px; background: #fff; z-index: 1; 

Note. Do not use inline CSS, create classes instead.

Demo 2 (without using background-color , border-bottom: 1px solid #fff; used instead border-bottom: 1px solid #fff; )

Answer 2

Like this

Demo

CSS

 .title{ border:solid 1px #CCC; margin: 15px 0px 0px 350px; border-bottom:1px solid #ffffff; padding:12px 12px 8px 12px; border-radius:5px 5px 0px 0px; width:300px; text-align:center; font-size:18px; color:#000 font-weight:bold; position:relative; top:1px; } .content{ width:968px; float:left; margin:0px 15px 15px 15px; border: solid 1px; border-color:#CCC; border-radius:10px; }