According to CSS2.1 14.2:
The above means, for example, that:
This is what standards compliant browsers (like Mozilla, Opera, Safari) do. In IE7-/Win the behaviour is affected by the hasLayout property of the element.
The following test cases show this behaviour. A div with a 10px dotted brown border is used. For each case the element is repeated twice: first (at the left) with hasLayout=false, then (at the right) with hasLayout=true. In order to have all the test divs with the same dimensions, and still have the possibility to apply hasLayout only when desired, the dimensions are so obtained: The width is given by an external wrapper. The height is given by an internal div, with fixed height.
The test element without any background:
The (100px × 100px) image used as background-image test:
Case 1: yellow background-color. It extends under the border only when hasLayout=false.
Case 2: background-image no-repeat, position 0 0. When hasLayout=true the starting position is the "padding edge", with hasLayout=false it is the "border edge"
Case 3: both background-color and background-image, no-repeat, position 0 0.
Case 4: background-image, repeat, position 0 0. The image extends under the border only when hasLayout=false.
Case 5: background-image no-repeat, position 10px 10px.
Case 6: background-image no-repeat, position 100% 100%.
Other similar tests background extension and border, with CSS3 properties background-clip and background-origin.
CSS tests home