Putting borders on <div>s within another <div>

I've got several <div>s inside another <div>, and they fit just right, but I would like to add a border to distinguish between them. However, when I add a border or an outline, it shows surrounding the outside of the div. Is there a way to get it so that the border will be inside the edge of the div?

Example: http://jsfiddle.net/5cSke/11/

I would like the inner <div>s to all stay within the outer div, and for the borders not to expand and cover anything outside th开发者_StackOverflowe inner <div>s.

EDIT (Partial Solution): I was able to find a partial solution by setting the overflow of the containing div to hidden, which prevented the borders from spreading beyond the outer <div>, but not from spreading between the <div>s within it.

That's how the box model works. There is a CSS3 box-sizing: border-box style that will let you do what you want.

Updated Fiddle: http://jsfiddle.net/5cSke/14/

you can make several divs within each other just give specify style for each one using div id or class

<style>
    div {
    border : 2px solid red;
    }

    div #test2 {
    border : 1px solid black;
    }
</style>

<div id="test1">
main div
    <div id="test2">inner div</div>
 <br>
</div>

for more information

Nested DIV elements

I don't think there's a way to prevent the border from appearing on the outside of your divs. I would instead recommend setting background colours on your divs in order to distinguish between them.

There might be a new css 3 property to do stuff like that. But there is a more elegant solution. Give each div an rgba value with some opacity. Overlapping (or) nested divs will have a darker background then its parent.

Working Example