0

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Ricardo Castillo
  • 5
  • 2

3 Answers3

0

Hey sorry but it's hard to tell anything without seeing the coding. Please at least share code for solution. Thanks

Varun Kaklia
  • 366
  • 4
  • 9
0

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

Link Strifer
  • 546
  • 1
  • 3
  • 7
  • 1
    Thank you very much for answering. I was thinking something like this would be the next best solution I just wanted to know for sure or if there was something a bit more simpler. – Ricardo Castillo Apr 04 '22 at 02:37
0

Share with us what you have tried (the original code) so we can be more clear about the problem and can tell you any fix to the problem.

Sharjeel Faiq
  • 87
  • 1
  • 9