make inner div inside not overlap outer div-CodePudding

I have the following image, but i need the blue part to be inside the white div. tried with overflow:hidden but doesn't work. how can i make it not to be visible and retain the border radius of the white div.

<div  style=" z-index: 1;display: block; margin: auto; text-align: center; height: 250px; width: 300px; border-radius: 4%; background-color: #ffffff;">
                <div  style=" background-color:rgb(0, 214, 255); height: 260px; width:50px;">

                </div>
            </div>

CodePudding user response：

overflow: hidden does work though:

body {
  background: black;
}

<div  style=" z-index: 1;display: block; margin: auto; text-align: center; height: 250px; width: 300px; border-radius: 4%; background-color: #ffffff;overflow:hidden">
  <div  style=" background-color:rgb(0, 214, 255); height: 260px; width:50px;">

  </div>
</div>

it's better if you set the child height smaller though in my opinion

CodePudding user response：

You could try adding overflow-y: hidden to your qrcode class

CodePudding user response：

overflow:hidden is working you can see the below:

<div  style=" z-index: 1;display: block; margin: auto; text-align: center; height: 250px; width: 300px; border-radius: 4%; background-color: #F7F7F7; overflow:hidden;">
                <div  style=" background-color:rgb(0, 214, 255); height: 260px; width:50px;">

                </div>
            </div>