Change background color under border-radius of specific element

April 4, 2022

I’m adding a border radius to the bottom of my sections. The background color of my body is black. I’m trying to have the color under each border-radius match the background-color of the next section. Not the background color of the body. Didn’t know how to word question to find on google, sorry in advanced if question has already been asked.

Border Radius Problem

>Solution :

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