clip-path-contentBox-1e.html (1101B)
1 <!DOCTYPE html> 2 <title>CSS Masking: clip path with content-box and border-radius</title> 3 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path"> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#valdef-shape-box-content-box"> 5 <link rel="match" href="reference/green-circle-100x100.html"> 6 <meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-400"> 7 <meta name="assert" content="Check that the 'clip-path' property supports content-box with border-radius."> 8 9 <style> 10 body { margin: 0; } 11 .clipped { 12 display: inline-block; 13 clip-path: content-box; 14 /* This background draws in the padding and should be clipped. */ 15 background-color: red; 16 padding: 4px; 17 border-radius: 58px; 18 /* This border draws outside the content box and should be clipped. */ 19 border: 4px solid darkred; 20 /* This outline draws outside the content box and should be clipped. */ 21 outline: 100px solid maroon; 22 } 23 .content { 24 width: 100px; 25 height: 100px; 26 background: green; 27 } 28 </style> 29 <div class="clipped"> 30 <div class="content"></div> 31 </div>