How to Make Rounded Corners Hide the Overflow in Opera/Chrome

Solutions with CSS

Earlier there was a bug causing a problem when there was a need to make rounded corners hide the overflow in Chrome and Opera. But now this problem has been fixed. So, you can try the following.

Set the width and height of the "wrapper", and specify its border-radius. Then set the overflow to "hidden" and the position to "absolute". For the "box" class too, specify the width and height.

Example of making rounded corners hide overflow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #wrapper {
        width: 300px;
        height: 300px;
        border-radius: 90px;
        overflow: hidden;
        position: absolute;
      }
      #box {
        width: 300px;
        height: 300px;
        background-color: #a9ffa3;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="box">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a 
        type specimen book. It has survived not only five centuries, but also the 
        leap into electronic typesetting, remaining essentially unchanged.
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

If this doesn’t work for some reason, there is another method to have your desired result. This method assumes adding an additional <div> element between the "wrapper" and "box".

Example of making rounded corners hide overflow with an additional <div>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #wrapper {
        position: absolute;
      }
      #middle {
        border-radius: 90px;
        overflow: hidden;
      }
      #box {
        width: 300px;
        height: 300px;
        background-color: #9c8dfc;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="middle">
        <div id="box">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
          when an unknown printer took a galley of type and scrambled it to make a 
          type specimen book. It has survived not only five centuries, but also the 
          leap into electronic typesetting, remaining essentially unchanged.
        </div>
      </div>
    </div>
  </body>
</html>