I have a CSS flexbox with a div set on the HTML canvas.
I want to have a border-radius around all four corners. I have tried using border-radius: 80px; but in vain.
A quick fiddle is here https://jsfiddle.net/opankajkumar/zxajhmpo/1/.
I want something like this. Chiseled at all the corners. 
But I am getting this.
Please help.
你的问题是overflow: scroll;。消除overflow: ?;财产来自.stage-area. With border-radius overflow: scroll;不会一起工作，它应该是hidden or 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>