How to make CSS3 rounded corners hide overflow in Chrome/Opera

Overflow: Special Cases and Alternative Solutions

Suppose, the conventional overflow: hidden approach is not effective. In these circumstances, we can venture into some lesser-known CSS methods:

Webkit transformation to rescue!

.rounded-transform {
  border-radius: 10px;
  overflow: hidden;
  -webkit-transform: translateZ(0); /* Chrome's favorite dance move */
}


The -webkit-transform: translateZ(0) property initiates hardware acceleration and ensures the proper clipping of children elements in Webkit-based browsers.

Adding decorations with pseudo-elements

.rounded-pseudos::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1; /* Playing hide and seek behind the main content */
}


Pseudo-elements assist in adding decoration elements without affecting overflow. Moreover, it maintains the sanctity of HTML structure.

The opacity-overflow paradox

An unexpected finding: altering the opacity of a child element less than 1 can sometimes "fix" the overflow issue. However, tread carefully—this workaround is not officially noted as a solution and can result in side effects.

Developer's Guide to Overflow Resistance

While overflow: hidden along with border-radius covers most scenarios, integrating these techniques with advanced methods ensures ultimate compatibility and finesse.

Using absolute position to contain overflow

Assigning the parent div as position: absolute; can often rectify any stubborn overflow visibility issues:

.absolute-container {
  position: absolute; /* Can't touch this! */
  border-radius: 10px;
  overflow: hidden;
}


Ensuring consistency across browsers with Webkit Mask

Using -webkit-mask-image with a radial gradient will ensure the rounded corners look uniform across Chrome and Opera:

.rounded-mask {
  border-radius: 10px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /* Rounding off those sharp corners */
}


This creates a mask that emulates overflow: hidden for those stubborn situations where content still escapes out of the rounded corners.

Optimum performance with single-pixel masking

Consider using a single pixel PNG image as a mask to reduce multiple HTTP requests:

.optimized-mask {
  border-radius: 10px;
  overflow: hidden;
  -webkit-mask-image: url('data:image/png;base64,...'); /* The web's smallest mask! */
}


Base64 encoding a single pixel image directly into your stylesheet can cut some load time.

Keeping updated with browser improvements

Continuously track updates as browsers like Chrome, Opera, Safari evolve. It's essential to ensure your code trick still applies in the latest updates.