Hello, how to make the black square not clipped by overflow: hidden and that the corners are rounded, thanks

.block { width: 300px; height: 300px; margin: 100px 100px; border-radius: 10px; overflow: hidden; } .block2 { width: 100%; height: 150px; background: red; } .block1 { width: 100%; height: 150px; background: green; position: relative; } .img { width: 50px; height: 50px; position: absolute; left: 50%; margin-left: -25px; top: -25px; background: black; } 
 <div class="block"> <div class="block1"> <div class="img"></div> </div> <div class="block2"></div> </div>

  • In general, the question is rather strange, because The oveflow: hidden property just means "hide everything that goes beyond." You put the property "hide all that goes beyond the limits" and ask how to make that "that which goes beyond the limit was not hidden", the most logical answer is to remove this very overflow: hidden . You have been given several answers here, I propose to accept one of them, or edit your question (clarify whether the overflow: hidden property can be removed or not) - Alexander Kazakov
  • The problem is that using overflow: hidden; I wanted to make rounds for .block1, .block2, and since they go beyond .block, I will not see rounds without overflow, they gave the answer below ... - NIkita M.

2 answers 2

No overflow: hidden

 .block { width: 300px; height: 300px; margin: 100px 100px; } .block2 { width: 100%; height: 150px; background: red; border-radius: 0 0 10px 10px; } .block1 { width: 100%; height: 150px; background: green; position: relative; border-radius: 10px 10px 0 0 ; } .img { width: 50px; height: 50px; position: absolute; left: 50%; margin-left: -25px; top: -25px; background: black; border-radius: 10px; } 
 <div class="block"> <div class="block1"> <div class="img"></div> </div> <div class="block2"></div> </div>

    Just by adding a padding property to .block:

     .block { width: 300px; height: 300px; margin: 100px 100px; border-radius: 10px; overflow: hidden; padding: 30px 0 0; } .block2 { width: 100%; height: 150px; background: red; } .block1 { width: 100%; height: 150px; background: green; position: relative; } .img { width: 50px; height: 50px; position: absolute; left: 50%; margin-left: -25px; top: -25px; background: black; } 
     <div class="block"> <div class="block1"> <div class="img"></div> </div> <div class="block2"></div> </div>

    • one
      Inaccurately, the border-radius top at .block then disappears - Alexander Kazakov
    • @AlexandrKazakov then remove just Hidden. - Vadizar