<!DOCTYPE html> <html> <head> <title>CSS Test: Background is clipped to the curve of the content-box when 'background-clip: content-box'</title> <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> <link rel="match" href="reference/border-radius-clip-002-ref.htm"> <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-clipping"> <meta name="assert" content="Background is clipped to the curve of the content-box when 'background-clip: content-box'"> <meta name=fuzzy content="0-70;0-50"> <style type="text/css"> #test-base { width: 98px; height: 98px; border: 10px double black; padding: 11px; border-radius: 40px; background: red url(support/swatch-red.png); background-clip: content-box; } #reference-cover { margin: -120px 0 40px 20px; width: 100px; height: 100px; border-radius: 20px; background-color: black; } #reference-base { width: 98px; height: 98px; margin-top: 62px; margin-left: 20px; border-radius: 20px; background: red url(support/swatch-red.png); } #test-cover { margin-top: -120px; border: 10px double black; padding: 10px; width: 100px; height: 100px; border-radius: 40px; background-color: black; background-clip: content-box; } </style> </head> <body> <p>Test passes if there is no red visible on the page.</p> <div id="test-base"></div> <div id="reference-cover"></div> <div id="reference-base"></div> <div id="test-cover"></div> </body> </html>