Css: Adding a Border Changes the Background-Color (!)

CSS: Adding a border changes the background-color (?!)

This happens because the margins of two block elements with position:static (the default) collapse as per CSS 2.1 8.3.1, i.e. the margin is "carried over" to the body element. This demo shows it does not happen with absolutely positioned elements, one of the exceptions (along with a non-none border) listed in the aforementioned standard.

border' makes 'background-color' works different

The border doesn't have any (direct) effect on the background colour, it has an effect on the margins.

Without a border, the top and bottom margins of the child elements collapse through the edge of the element.

When you add a border, those margins stop at the border pushing the child elements away from it and increasing the size of the element inside the border (which is filled with the background colour).

See this article for further reading.

CSS border-radius changes the background corners

create the circle with a background-image

.parent {
  border: 1px solid;
  display: flex;
  overflow: hidden;
}

.child {
  padding: 2rem;
}

.child:hover {
  cursor: pointer;
  background-color: #a1a1a1;
}

.myClass {
  background-color: #a1a1a1;
}

.myClass:hover {
  background-image: radial-gradient(farthest-side, red 99%, transparent);
}

<div class="parent">
  <span class="child">4</span>
  <span class="child">5</span>
  <span class="child myClass">6</span>
  <span class="child myClass">7</span>
  <span class="child myClass">8</span>
</div>

Change background color under border-radius of specific element

You can do this using a before pseudo-element and z-index -1, it's kinda tricky:

section {
  border-radius: 0 0 40px 40px;
  height: 200px;
  position: relative;
  width: 100vw;
}

section:after {
  content: "";
  position: absolute;
  top: -40px; /* border radius size * -1 */
  left: 0;
  height: 40px; /* border radius size */
  width: 100vw;
  z-index: -1;
}

section:nth-child(odd) {
  background-color: magenta;
}

section:nth-child(even) {
  background-color: cyan;
}

section:nth-child(odd):after {
  background-color: magenta;
}

section:nth-child(even):after {
  background-color: cyan;
}

Live example: https://codesandbox.io/s/quizzical-river-iwxz4c?file=/src/styles.css

changing backgroundColor changes border

Browsers I've tested: Opera 10.70, Firefox 3.6.9, IE 8.0 changes to inset. Webkit (Chrome 5.0.375.70 and Safari 5.0.2) also changes to inset but only when color to set is different than current color.

Every browser has different look of their controls, I call it a default look. You can customize control (e.g. change color of its background), then it changes to, what I call, a customizable look. It changes its properties to standard, editable by CSS, which should look the same on every browser. Default property for border-style of customizable-looking input-type=text is "inset".

Similar mechanism affects customizing scrollbars. If you set a color, scrollbar will be rectangular, because only then it can be colored.

Why does adding a border change the behavior of the background color?

The outer div has margin, which needs something to "push" against.

When the enclosing div has no border (or padding), there is nothing for the margin of the outer div to push against.

Adding border or padding to the top/bottom of the div gives it the necessary containment for the outer div to calculate off of.

I believe this is what's known as collapsing margins in the Box Model

---

Related Topics