Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-contentBox-1e.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Masking: clip path with content-box and border-radius</title>
<link rel="match" href="reference/green-circle-100x100.html">
<meta name="fuzzy" content="maxDifference=0-65; totalPixels=0-400">
<meta name="assert" content="Check that the 'clip-path' property supports content-box with border-radius.">
<style>
body { margin: 0; }
.clipped {
display: inline-block;
clip-path: content-box;
/* This background draws in the padding and should be clipped. */
background-color: red;
padding: 4px;
border-radius: 58px;
/* This border draws outside the content box and should be clipped. */
border: 4px solid darkred;
/* This outline draws outside the content box and should be clipped. */
outline: 100px solid maroon;
}
.content {
width: 100px;
height: 100px;
background: green;
}
</style>
<div class="clipped">
<div class="content"></div>
</div>