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.
