CODEWITHSUNDEEP
cssborderbackground-color
ajax333221
ajax333221

Reputation: 11764

background-color of dashed borders

I currently have a HTML structure like this:

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

The CSS is like this:

* {
    margin: 0;
    padding: 0;
}

#content, #footer {
    background: #fff;
}

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

Note: holder doesn't have any background-color

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

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

My Question:

Upvotes: 3

Views: 14622

Answers (1)

user559633
user559633

Reputation:

  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

Upvotes: 6

Related Questions