Trying to round the edges for a wrapper while keeping border on top of all elements

Question

I'm trying to make a border with rounded edges using custom css for a wrapper. But the z-index always shows it below unless I make the child elements transparent or invisible.

Is there anyway to make the border z-index show above, or perhaps add a border to ::before elements?

Here's my code:

<div id="PollWrapper" style="width: 100%;" class="PollBar">
  <div
    class="bad"
    style="font-size: 18px; overflow: hidden; height: 42px; float: left; background-color: #fe0000; width: 50%;"
  >
    <center>Bad!(50%)</center>
  </div>
  <div
    class="good"
    style="font-size: 18px; overflow: hidden; height: 42px; float: left; background-color: #06BF00; width: 50%;"
  >
    <center>Good!(50%)</center>
  </div>
</div>

And the pic of what I'm working with and below it, how I want it to look. I figured it was easier to just make a white border to give the illusion of rounded edges. But I'm open to all ideas. Thank you.

Hello! Sorry 'bout that. (Was in a rush when posting.) Just updated the original post. — jackson, Dec 24 '18 at 16:38

Gabriel · Accepted Answer · 2018-12-25T19:57:44.927

1

The border itself doesn't have z-index. The problem is that the children are bigger than the parent, thus they're drawn outside of it (overflow). You can use overflow: hidden on .PollBar, or set the border radius on the children (top and bottom left for .bad and top and bottom right for .good.

edited Dec 25 '18 at 19:57

answered Dec 24 '18 at 16:48

Gabriel

2,170
1
17
20

1

Thank you for the "overflow" advice. Simple solution. There are 3 different choices in this voting poll bar, so it would require lots of if statements in order to make sure the correct corners were rounded depending on the voting percentage. Here's what I ended up putting that solved the problem: `#pollWrapper { border-radius: 3em 3em 3em 3em; } .pollBar { overflow:hidden!important; } ` – jackson Dec 24 '18 at 18:51

score 1 · Answer 2 · answered Dec 24 '18 at 16:54

Adding to Gabrie's answer, you could also use display: flex to your .PollBar element instead of using float to the children elements.

See sample below:

.PollBar {
  display: flex;
}
.poll-result {
  font-size: 18px; 
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bad {
  background-color: #fe0000;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.good {
  background-color: #06BF00;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

<div id="PollWrapper" style="width: 100%;" class="PollBar">
  <div
    class="poll-result bad"
    style=" width: 40%;"
  >
    <center>Bad!(40%)</center>
  </div>
  <div
    class="poll-result good"
    style="width: 60%;"
  >
    <center>Good!(60%)</center>
  </div>
</div>

Trying to round the edges for a wrapper while keeping border on top of all elements

2 Answers2