boxes
Each box has a content area and optional surrounding padding, border, and margin areas. The size of each area is specified by properties. The margin, border, and padding can be broken down into top, right, bottom, and left segments. The perimeter of each boxes is called an “edge”, so each box has four edges.
The background color is painted inside the border box, hence it shows behind the transparent border.
Note that it works differently for background images, see background-position <length>
This styling shows that it is possible to use borders to create shapes.
IE 6 renders transparent borders black, but authors may use the chroma filter (a MS proprietary property) to create transparency. The trick is to use the same color value for border and chroma color.
For example:
For example:
#pink {
border: 10px solid blue;
border-top: 10px solid transparent;
*border-top-color: yellow;
filter: chroma(color=yellow);
}
Make sure to use a color that is not used within the box and make sure to give a layout to the box since filters only apply to elements that have a layout.
