How to set the border for internal and external elements to prevent double border in

Question

I know that we can use the inset and ouset borders for the stylization border for the table.

 table{border: 1px inset #fff;} td{border: 1px outset #fff;} 

everything is fine when we use a table, because every thing is in td , and you never add an element or text to the table tag directly.

Now the question is that when we use a div to execute the same style, there are many problems.

• If we put text or an element in an external div, we will not see any border on the right side.
• the first inner div has no border at the top.

here is the fiddle to make the problem more specific.
http://jsfiddle.net/v4D9q/

Answer 1

Do you need to use insert / start?

These are a few lines more than css, but why not just place the border on the upper / left / right side of the outside and just set the bottom on the inside elements.

HTML:

 <div class="outer"> outer div (we dont see border in right side) <div class="inner">inner div</div> <div class="inner">inner div</div> </div> 

CSS

 .outer{ border-left: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #000; } .inner{ border-bottom: 1px solid #000; } 

http://jsfiddle.net/PFhfF/