Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<title>background-clip application to clip of descendants</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"/>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping" />
<link rel="match" href="border-radius-overflow-descendant-clip-ref.html">
<meta name="assert" content="border-radius clips descendants along background-clip curve"/>
<style>
  .clipper {
    overflow: hidden;
    border-radius: 30px;
    width: 100px;
    height: 100px;
    border: 5px solid rgba(0, 0, 0, 0.4);
    background-color: lightblue;
    padding: 5px;
    display: inline-block;
  }
  .clipped {
    width: 200px;
    height: 200px;
    position: relative;
    top: -50px;
    left: -50px;
    background: lightgreen;
  }
  .composited {
    will-change: transform;
  }
  .iframe {
    width: 196px;
    height: 196px;
    position: relative;
    top: -50px;
    left: -50px;
    background: lightgreen;
  }
</style>
<p>
  <pre>background-clip: border-box</pre>
  <div class=clipper style="background-clip: border-box">
    <div class=clipped></div>
  </div>
  <div class=clipper style="background-clip: border-box">
    <div class=clipped composited></div>
  </div>
  <!-- replaced element contents are always clipped to the content box. -->
  <iframe class=clipper style="background-clip: padding-box"
      srcdoc="<style>html { background: lightgreen }</style>"></iframe>
</p>
<p>
  <pre>background-clip: padding-box</pre>
  <div class=clipper style="background-clip: padding-box">
    <div class=clipped></div>
  </div>
  <div class=clipper style="background-clip: padding-box">
    <div class=clipped composited></div>
  </div>
  <!-- replaced element contents are always clipped to the content box. -->
  <iframe class=clipper style="background-clip: padding-box"
      srcdoc="<style>html { background: lightgreen }</style>"></iframe>
<p>
  <pre>background-clip: content-box</pre>
  <div class=clipper style="background-clip: content-box">
    <div class=clipped></div>
  </div>
  <div class=clipper style="background-clip: content-box">
    <div class=clipped composited></div>
  </div>
  <!-- replaced element contents are always clipped to the content box. -->
  <iframe class=clipper style="background-clip: padding-box"
      srcdoc="<style>html { background: lightgreen }</style>"></iframe>
</p>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers