background-clip-padding-box-001.html (628B)
1 <!doctype html> 2 <title>background-clip: padding-box with fractional border-width</title> 3 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-clip"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 #back { 7 width: 100px; 8 background-color: red; 9 } 10 #target { 11 box-sizing: border-box; 12 width: 100px; 13 height: 100px; 14 border-top: 49.75px solid green; 15 border-bottom: 49.75px solid green; 16 background-color: green; 17 background-clip: padding-box; 18 } 19 </style> 20 <p>Test passes if there is a filled green square.</p> 21 <div id="back"> 22 <div id="target"></div> 23 </div>