How to make CSS3 rounded corners hide overflow in Chrome or Opera?

Spread the love

Sometimes, we want to make CSS3 rounded corners hide overflow in Chrome or Opera.

In this article, we’ll look at how to make CSS3 rounded corners hide overflow in Chrome or Opera.

How to make CSS3 rounded corners hide overflow in Chrome or Opera?

To make CSS3 rounded corners hide overflow in Chrome or Opera, we can use border-radius and overflow.

For instance, we write

<div id="wrapper">
  <div id="box"></div>
</div>

to add nested divs.

Then we write

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

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

to add overflow: hidden; to hide overflow.

And we use border-radius: 100px; to make the corners rounded.

Conclusion

To make CSS3 rounded corners hide overflow in Chrome or Opera, we can use border-radius and overflow.

Leave a Reply

Your email address will not be published. Required fields are marked *