Does Border-Radius Clip Content or Just the Background?

Border-Radius Clipping: Understanding the Behavior

Question:

Can the content of an element with border-radius extend beyond its boundaries?

Provided Example:

Consider the following HTML and CSS code:

<div class="progressbar">
    <div class="buffer"></div>
</div>

.progressbar {
    height: 5px;
    width: 100px;
    border-radius: 5px;
}

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

In this example, the ".buffer" element appears to extend beyond the rounded corners of the ".progressbar" container.

Answer:

Yes, this behavior is intended by design.

Explanation:

According to the CSS specification, the default overflow property for elements is "visible." This means that content is not clipped and may render outside the container. The "border-radius" property clips the background of the container, but if the overflow property is set to "visible," the content will not be affected.

The CSS specification for background clipping states that "other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve." This means that if overflow is set to anything other than "visible," the content will be clipped within the rounded corners of the container.

Therefore, to ensure that the content remains within the rounded corners, it is necessary to set the overflow property of the container to "hidden," "scroll," or another non-"visible" value. By setting overflow to "hidden" in this example, the ".buffer" element will be clipped within the rounded corners of the ".progressbar" container.

The above is the detailed content of Does Border-Radius Clip Content or Just the Background?. For more information, please follow other related articles on the PHP Chinese website!