Why Does CSS3 `border-radius` Overflow in Chrome/Opera, and How Can It Be Fixed?

How to Resolve Overflow Issue with CSS3 Rounded Corners in Chrome/Opera

In certain situations, using CSS3's border-radius property to create rounded corners on a parent div can result in content overflow in Chrome and Opera browsers. This issue arises when the parent is positioned relatively or absolutely.

Original Approach

The following code demonstrates the problem in Chrome/Opera:

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

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

This approach, which works in Firefox and IE9, fails to mask the overflowing content in Chrome/Opera.

Improved Solution

A solution involves adding a WebKit CSS Mask to the #wrapper element:

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

This approach employs a single-pixel PNG image to define a CSS mask that masks the overflowing content. It effectively resolves the overflow issue in Chrome/Opera, maintaining the rounded corners.

The above is the detailed content of Why Does CSS3 `border-radius` Overflow in Chrome/Opera, and How Can It Be Fixed?. For more information, please follow other related articles on the PHP Chinese website!