Blitz - WPT: border-shape-clips-background.html

wpt / css / css-borders / border-shape / border-shape-clips-background.html

/css/css-borders/border-shape/border-shape-clips-background.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<link rel="match" href="border-shape-clips-background-ref.html">
<style>
#target {
    width: 100px;
    height: 100px;
    border-shape: circle();
    border: 10px solid purple;
    background: green;
    border-radius: 10px;
}
</style>
<div id="target"></div>

/css/css-borders/border-shape/border-shape-clips-background-ref.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#border-shape">
<style>
svg {
    width: 100px;
    height: 100px;
    overflow: visible;
    border: 10px solid transparent;
}

circle {
    stroke: purple;
    stroke-width: 10px;
    fill: green;
}
</style>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="55" />
</svg>