Why does giving a div a background color paint over its border?

At present, I can either have a border around my div, or have a background color inside of the div, but not both. By adding a border in the code-behind like this:

gadsDiv.Attributes.Add("style", "border: 2px solid blue");

…I get the border:

Why does giving a div a background color paint over its border?

But if I also want a background color:

gadsDiv.Attributes.Add("style", "background-color: lightyellow");

…I get the background color, but lose the border:

Why does giving a div a background color paint over its border?

Why can’t I have my background color and border it, too?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

gadsDiv.Attributes.Add() will overwrite the attribute that was previously assigned.

Try this instead:

gadsDiv.Attributes.Add("style", "background-color: lightyellow; border: 2px solid blue");

Method 2

Looks like you are overriding the first style. Instead add all the styles to same attribute as @abney317 said.
CSS never hide border with background color unless it is same color. Here is an example for background and borders with same color and different color.
Using border you can add inner border. You can also add outer border by using outline property.

#box1{
width: 200px;
height: 200px;
background: red;
border-top: 5px solid red;
border-left: 5px solid blue;
outline: 5px solid green;
}
<div id="box1">
</div>
<div id="box2">
</div>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x