User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2 Firefox displays borders which are set via CSS in a stylesheet like div.three { background-color:#FFCC99; border-style: solid; border-color: #ff0000 #00ff00 transparent; border-bottom-width:10px; height:100px; } Instead it displays the background-color in the border region. I think this is wrong. MS IE7 behaves differently by the way and shows a transparent border area with 10px width. Reproducible: Always Steps to Reproduce: 1. Use a DIV with a certain width and height in a HTML page 2. Set a background color (e.g. #FF0000) for the div via a css style 3. Define a border for the DIV with a certain width (e.g. 10px). Use border-style "solid". 4 Set the border-color in the CSS style to "transparent". 5 The border area is displayed with the background-color(#FF0000) instead of being transparent Actual Results: The border area of the DIV is displayed with the background-color(#FF0000) instead of being transparent Expected Results: The DIV area should have been filled with the background-color. The border area should be transparent. MS IE7 respects "transparent" for borders.

"I think this is wrong." Well the CSS spec seems to say otherwise. The CSS spec seems to back what Mozilla does from this passage: "The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent." Therefore if the border is transparent then the box's background color gets shown. That's from the end of 8.1: http://www.w3.org/TR/CSS21/box.html#box-dimensions Also notice how the box's background color is shown when using a dashed border in this image from chapter 8: http://www.w3.org/TR/CSS21/images/boxdimeg.png

Hm, I am certainly no friend of MS and especially not of the Internet Explorer. So I would like to agree. However, I agree only partially. Your quotation is of course right. However, I disagree with the conclusion drawn. The reason is that the introductory remarks of 8.1 are elaborated later on in more detail. I refer to paragraph 8.5.2 - excerpts: "The border color properties specify the color of a box's border." and (!!!) "The 'border-color' property sets the color of the four borders. Values have the following meanings: <color> Specifies a color value. transparent The border is transparent (though it may have width)." (!!!) and "If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color." I conclude from this: If the border-color is explicitly specified by "transparent" (though the border may have width !!!) the border should be displayed tranparent. If the color is not explicitly specified then it should get the color from the generating element. To me it seems natural that I get a transparent element whenever I explicitly declare it to be "transparent".

"To me it seems natural that I get a transparent element whenever I explicitly declare it to be "transparent"." In that case you are talking about that element's background. The border is not in the background. The border has it's own background which is just really the background of the element.

Brian is right here. The border is drawn on top of the background, so if the border is transparent, the background can be seen. IE7 has a bug here, but that will be fixed in IE8. You may be interested in the CSS3 property background-clip. If it's value is set to 'padding-box', the background isn't laid out behind the border and transparent borders are transparent to the Elements behind the box. http://www.w3.org/TR/css3-background/#background-clip We support an older version of this: https://developer.mozilla.org/en/CSS/-moz-background-clip I know that Safari implemented this as well, but I got no further details.

Ok, I am convinced now. And the hint regarding the CSS3 property is helpful.