Попытка скруглить края для обертки, сохраняя границы поверх всех элементов

Question

Я пытаюсь создать рамку с закругленными краями, используя пользовательский CSS для оболочки.Но z-index всегда показывает это ниже, если я не сделаю дочерние элементы прозрачными или невидимыми.

В любом случае, чтобы z-index границы показывался выше, или, возможно, добавить границу к ::before элементам?

Вот мой код:

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

И изображение того, с чем я работаю и под ним, как я хочу, чтобы это выглядело.Я подумал, что проще сделать белую рамку, чтобы создать иллюзию закругленных краев.Но я открыт для всех идей.Спасибо.

Answer 1

Добавляя к ответ Габри , вы также можете использовать display: flex для элемента .PollBar вместо использования float для дочерних элементов.

См. Образец ниже:

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

Answer 2

Сама граница не имеет z-index .Проблема в том, что дочерние элементы больше родительского, поэтому они выводятся за его пределы (переполнение).Вы можете использовать overflow: hidden для .PollBar или установить радиус границы для дочерних элементов (верхний и нижний левый для .bad и верхний и нижний правый для .good.