Create a border around 2 divs

Question

Just a quick question...

I have created two divs - essentially two squares, one large one small - positioned one beneath another.

I would like to put a border around both of these divs to outline the entire shape - not an outline around both divs as I have done in the picture - It leaves the line between which I have circled in the image. Is this possible?

Here is the the html and css for the divs:

 #shapeTop { height: 70px; width: 70px; background: blue; float: right; outline: 4px solid black; } #shapeBottom { height: 420px; width: 420px; background: blue; clear: both; float: right; outline: 4px solid black; } 

 <div id="shape"> <div id="shapeTop"> </div> <div id="shapeBottom"> </div> </div> 

Thank you in advance - G

Answer 1

Use border instead, disable the bottom border on the top box, add position: relative to the top box so it displays on top of the bottom one, and use translateY() to push the top box down 4 px so it covers the bottom box's border.

 #shapeTop { height: 70px; width: 70px; background: blue; float: right; border: solid black; border-width: 4px 4px 0; position: relative; transform: translateY(4px); } #shapeBottom { height: 420px; width: 420px; background: blue; clear: both; float: right; border: 4px solid black; } 

 <div id="shape"> <div id="shapeTop"> </div> <div id="shapeBottom"> </div> </div> 

Answer 2

Simple, just set the border-bottom property to 0px, or none, for the top box (and convert all the outlines to borders ).

Then, set border-top for the bottom box to none as well.

Finally, add a :before pseudo element to the bottom box (you also have to set position: relative; on the bottom box). This :before element should contain the following code:

#bottomBox:before {
content: ""; // needed any :before element
position: absolute; // needed for following code
left: 0; // 
top: 0;  // sets it to start at the top left
height: 2px; /*  thickness of border */
width: 150px; /* adjust this until its the correct length */
background-color: black; /* color of border */

}

Answer 3

setting border-bottom to 0px will not remove border-top from the big square, I recommend to set: border-bottom: 5px solid blue; and have #shapeTop below #shapeBottom and have that property in the last line - in that case it will overwrite everything above.