Search code examples
cssz-indexwrapper

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

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.

enter image description here

Solution

  • 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.