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.
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.