ajax333221 ajax333221 - 2 months ago 10x
CSS Question

background-color of dashed borders

I currently have a HTML structure like this:

<div id="holder">
<div id="content">...</div>
<div id="footer">...</div>

The CSS is like this:

* {
margin: 0;
padding: 0;

#content, #footer {
background: #fff;

#footer {
border-top: 1px dashed #ddd;

doesn't have any

My concern is that the background of the top border on the
will be transparent since
doesn't have any background.

And applying a white background to the
is not an option in my case (I won't explain why not, but trust me, it is not possible)

My Question:

  • The background of the dashed border will be the same of my

    (white) or the background-color of

  • Will it behave cross-browser the same way all the time?

  1. The border belongs to your #footer div and will render with its background attribute - clear or otherwise.

  2. I've tested the following CSS in Chrome, Safari, Firefox (sorry, no immediate IE access):

    * { margin: 0; padding: 0; }
    #content, #footer { background: #fff; }
    #content { background:#00F; }
    #footer {
        border-top: 5px dashed #f00;

Please let me know if I missed your question, but I believe this is what you were asking.

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.

via http://www.w3.org/TR/CSS2/box.html