Databases
StackOverflow2013
Postsdbo
POCSS3 border-radius clipping issues
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 border-radius clipping issues
    text
    copied!<p>I have a div with border-radius set to some value (let's say 10px), and a nested div that is the full width and height of its parent. </p> <pre><code>&lt;!-- ... --&gt; &lt;style type="text/css"&gt; div.parent { display: block; position: relative; width: 100px; height: 100px; border-radius: 10px; background: #0000ff; overflow: hidden; } div.inner { display: block; position: relative; width: 100%; height: 100%; background: #ff0000; } &lt;/style&gt; &lt;!-- ... --&gt; &lt;div class="parent"&gt; &lt;div class="inner"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- ... --&gt; </code></pre> <p>I noticed that the parent does not clip the child around the rounded corners, in spite of overflow being set to hidden. Another stackoverflow thread indicates that this behavior is "by design":</p> <blockquote> <p><a href="https://stackoverflow.com/questions/587814/how-do-i-prevent-an-image-from-overflowing-a-rounded-corner-box-with-css3">How do I prevent an image from overflowing a rounded corner box with CSS3?</a></p> </blockquote> <p>However, upon digging up the working draft for CSS3 backgrounds and borders...</p> <blockquote> <p><a href="http://www.w3.org/TR/css3-background/#corner-clipping" rel="nofollow noreferrer">http://www.w3.org/TR/css3-background/#corner-clipping</a></p> </blockquote> <p>...I couldn't help but notice the following description under the "corner clipping" section:</p> <blockquote> <p>Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve</p> </blockquote> <p>So what am I missing? Is the content supposed to be clipped to the corners? Am I looking at outdated information? Am I doing it wrong?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload