Why Do Rounded Corners with `overflow: hidden` Fail in WebKit and Opera, and How Can I Fix It?

Addressing Overflow Hidden Issues with CSS3 Rounded Corners in WebKit and Opera

Masking content beneath rounded corners often involves using the overflow: hidden property. However, this technique can malfunction in WebKit-based browsers (including Chrome) and Opera when the parent element is positioned relatively or absolutely.

Problem:

To illustrate the issue, consider the following code:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

In this case, the #wrapper div is positioned absolutely and has rounded corners. However, the #box div's content spills outside the rounded corners in WebKit-based browsers and Opera.

Solution: WebKit CSS Mask

An alternative solution to tackle this issue is to employ a WebKit CSS Mask on the #wrapper element. This involves using a single-pixel PNG image as the mask:

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
  /* This fixes the overflow in Chrome/Opera */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

This technique successfully hides overflow in WebKit-based browsers and Opera, allowing the rounded corners to mask the child element's content effectively.

The above is the detailed content of Why Do Rounded Corners with `overflow: hidden` Fail in WebKit and Opera, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!