Why Does Content Extend Beyond Rounded Corners?-CSS Tutorial-php.cn

Why Does Content Extend Beyond Rounded Corners?

Susan Sarandon

Release： 2024-11-10 13:11:02

Original

868 people have browsed it

Why Does Content Extend Beyond Rounded Corners?

Do Rounded Borders Affect Content Visibility?

Question:

Why does the content of an element with rounded borders (border-radius) extend beyond the container's boundary?

Sample HTML and CSS:

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

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

Copy after login

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

Copy after login

Explanation:

By default, the content of a

element is not clipped when visible overflow is applied. The CSS specification clearly states:

"The default overflow for

elements (and most other things) is visible, and the spec says this about overflow: visible:

...content is not clipped, i.e., it may be rendered outside the block box."

The CSS specification further explains that elements with rounded corner clipping will only affect background imagery, not content.

Consequences:

As a result, content elements may extend beyond the rounded corners of their container if visible overflow is used.

Resolution:

To ensure content is clipped within the container's rounded corners, an overflow other than visible (e.g., hidden, scroll, etc.) must be applied to the container. In this case, adding overflow: hidden to the .progressbar class will resolve the issue.

The above is the detailed content of Why Does Content Extend Beyond Rounded Corners?. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：How to Create a Transparent Hole in a CSS Overlay? Next article：Why Are My Glyphicons Not Displaying Properly in Bootstrap 3?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn