Blitz - WPT: corner-shape-superellipse-bevel.html

wpt / css / css-borders / corner-shape / corner-shape-superellipse-bevel.html

/css/css-borders/corner-shape/corner-shape-superellipse-bevel.html

<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: 'corner-shape: superellipse(0)' is equivalent to bevel</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
<link rel="match" href="corner-shape-superellipse-bevel-ref.html">
<meta name="fuzzy" content="maxDifference=0-120;totalPixels=0-200">
<style>
    .target {
        background: green;
        width: 100px;
        height: 100px;
        border-radius: 25px;
        box-sizing: border-box;
        border: 5px solid red;
        corner-shape: superellipse(0);
    }
</style>
</head>
<div class=target></div>

/css/css-borders/corner-shape/corner-shape-superellipse-bevel-ref.html

<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: 'corner-shape: superellipse(0)' is equivalent to bevel — reference</title>
<style>
    .target {
        position: relative;
        background: red;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        clip-path: polygon(
            25px 0px, 75px 0px, 100px 25px, 100px 75px,
            75px 100px, 25px 100px, 0px 75px, 0px 25px);
    }
    .target::before {
        content: '';
        position: absolute;
        inset: 0;
        background: green;
        clip-path: polygon(
            27.071px 5px, 72.929px 5px, 95px 27.071px, 95px 72.929px,
            72.929px 95px, 27.071px 95px, 5px 72.929px, 5px 27.071px);
    }
</style>
</head>
<div class=target></div>