How to make child elements respect parent's curved border in CSS?

"Curved border forces child elements to respect parent element border" in CSS

Problem:

In HTML, child elements are placed inside the parent element, and the parent element has a curved border. However, the child element will extend beyond the parent element's curved border. How to make child elements respect the parent element's curved border?

CSS code sample:

<code class="css">#outer {
  display: block;
  float: right;
  margin: 0;
  width: 200px;
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
}

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}</code>

Answer:

According to CSS3 specification:

The content of the replaced element is always trimmed to the content edge curve.

This means setting overflow:hidden on the parent element #outer should work. However, this does not work in Firefox 3.6 and below. The issue has been fixed in Firefox 4:

Rounded corners now clip content and images (if overflow:visible is not set).

So the solution should be:

<code class="css">#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}</code>

This solution is for Firefox 3.6 and below.

The above is the detailed content of How to make child elements respect parent's curved border in CSS?. For more information, please follow other related articles on the PHP Chinese website!