Проблема с радиусом границы с помощью div

Question

У меня есть flexbox CSS с набором div на холсте HTML. Я хочу иметь радиус границы вокруг всех четырех углов. Я пытался использовать border-radius: 80px;, но тщетно. Быстрая скрипка здесь . Я хочу что-то подобное. Точил по всем углам. Но я получаю это. Пожалуйста, помогите.

Answer 1

Я проверил вашу скрипку, она работает так, как вы хотите, единственная проблема - вы добавили переполнение: scroll; которая вызывает проблему, с которой вы сталкиваетесь.

Отметьте this

overflow:scroll;

Удалите это.

Если вам нужно что-то еще, не стесняйтесь поделиться

Answer 2

Ваша проблема overflow: scroll;. Удалить свойство overflow: ?; из .stage-area. С border-radius overflow: scroll; не будет работать вместе, это должно быть hidden или inherit. Ниже фрагмента.

.stage-area {
  width: 50%;
  background: #ffffff;
  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 60%;
  /*overflow: scroll;*/
}

.stage-area {
  width: 50%;
  background: #ffffff;
  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 60%;
  /*overflow: scroll;*/
}

body {
  height: 100%;
  margin: 0px;
  background-color: #ffce31;
}

.brand-icon {
  padding: 0 10% 0 10%;
}

.outer-yellow-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

<div className="outer-yellow-area">
        <img className="brand-icon" src={brandIcon} alt="logo" />
        <div class="stage-area">
        Center stage
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        </div>
      </div>

Answer 3

Если вы хотите что-то вроде этого: border-radius with overflow: scroll, тогда это ответ. Иначе, пожалуйста, дайте мне знать.

<div className="outer-yellow-area">
    <img className="brand-icon" src={brandIcon} alt="logo" />
    <div class="stage-area">
    Center stage
    <div class="bstage">
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>
    <div>below stage</div>

            </div>


    </div>
  </div>

и CSS

  .stage-area {
    width: 50%;
    height: 60%;
    background: #ffffff;
    box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    display: flex;
    flex-direction: column;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    border:10px solid transparent;



    }

 .bstage{
    overflow-y:scroll;
    max-height: 100px;
    }

 .bstage::-webkit-scrollbar {
    width: .8em;

    }

 .bstage::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 30px;



    }

 .bstage::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius:30px;
    height: 5px;


    }

  body {
    height: 100%;
    margin: 0px;
    background-color: #ffce31;
    }

 .brand-icon {
    padding: 0 10% 0 10%;
    }

 .outer-yellow-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    }

jsfiddle: https://jsfiddle.net/a14ythfg/