Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?border-radius=30%&corner-shape=superellipse(-1.5)&box-shadow=10px%2010px%200%2010px%20black - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?border-radius=40%&corner-shape=notch&box-shadow=10px%2010px%200%2010px%20yellow - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?border-radius=50%&corner-shape=bevel&box-shadow=10px%2010px%200%2010px%20black - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?border-radius=50%&corner-top-left-shape=scoop&corner-bottom-right-shape=scoop&corner-top-right-shape=notch&corner-bottom-left-shape=notch&border-width=10px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?border-radius=50%&corner-top-right-shape=scoop&corner-bottom-left-shape=scoop&corner-top-left-shape=notch&corner-bottom-right-shape=notch&border-width=10px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=scoop&border-radius=20%&border-width=20px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=squircle&border-radius=25%&border-width=20px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=squircle&border-radius=25%&box-shadow=10px 10px 0 10px black - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=squircle&border-radius=50% - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=superellipse(-2)&border-radius=20%&border-width=20px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=superellipse(-7)&border-radius=20%&border-width=20px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=superellipse(0.8)&border-radius=40px&border-width=10px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=superellipse(3)&border-radius=40px&box-shadow=10px 10px 0 10px black - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-shape=superellipse(5)&border-radius=20%&border-width=20px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-top-left-shape=bevel&border-radius=40px&border-width=10px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-top-left-shape=bevel&corner-bottom-right-shape=bevel&border-radius=40px&border-width=10px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-top-left-shape=scoop&corner-top-right-shape=scoop&border-radius=50% - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-top-left-shape=superellipse(-4)&border-radius=40% - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-top-left-shape=superellipse(2.5)&border-radius=20%&border-width=10px - WPT Dashboard Interop Dashboard
- /css/css-borders/corner-shape/corner-shape-render-fuzzy.html?corner-top-right-shape=scoop&border-radius=20%&border-width=10px - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Borders and Box Decorations 4: 'corner-shape' parametric rendering</title>
<link rel="match" href="corner-shape-any-ref.html">
<meta name="fuzzy" content="maxDifference=0-200;totalPixels=0-550">
<meta name="variant" content="?corner-shape=scoop&border-radius=20%&border-width=20px">
<meta name="variant" content="?corner-shape=superellipse(-2)&border-radius=20%&border-width=20px">
<meta name="variant" content="?corner-top-left-shape=bevel&border-radius=40px&border-width=10px">
<meta name="variant" content="?corner-top-left-shape=scoop&corner-top-right-shape=scoop&border-radius=50%">
<meta name="variant" content="?corner-shape=squircle&border-radius=25%&border-width=20px">
<meta name="variant" content="?corner-shape=squircle&border-radius=25%&box-shadow=10px 10px 0 10px black">
<meta name="variant" content="?corner-shape=squircle&border-radius=50%">
<meta name="variant" content="?corner-shape=superellipse(-7)&border-radius=20%&border-width=20px">
<meta name="variant" content="?corner-shape=superellipse(5)&border-radius=20%&border-width=20px">
<meta name="variant" content="?corner-top-left-shape=bevel&corner-bottom-right-shape=bevel&border-radius=40px&border-width=10px">
<meta name="variant" content="?corner-top-left-shape=superellipse(-4)&border-radius=40%">
<meta name="variant" content="?corner-top-left-shape=superellipse(2.5)&border-radius=20%&border-width=10px">
<meta name="variant" content="?corner-top-right-shape=scoop&border-radius=20%&border-width=10px">
<meta name="variant" content="?corner-shape=superellipse(0.8)&border-radius=40px&border-width=10px">
<meta name="variant" content="?corner-shape=superellipse(3)&border-radius=40px&box-shadow=10px 10px 0 10px black">
<meta name="variant" content="?border-radius=30%&corner-shape=superellipse(-1.5)&box-shadow=10px%2010px%200%2010px%20black">
<meta name="variant" content="?border-radius=40%&corner-shape=notch&box-shadow=10px%2010px%200%2010px%20yellow">
<meta name="variant" content="?border-radius=50%&corner-top-left-shape=scoop&corner-bottom-right-shape=scoop&corner-top-right-shape=notch&corner-bottom-left-shape=notch&border-width=10px">
<meta name="variant" content="?border-radius=50%&corner-top-right-shape=scoop&corner-bottom-left-shape=scoop&corner-top-left-shape=notch&corner-bottom-right-shape=notch&border-width=10px">
<meta name="variant" content="?border-radius=50%&corner-shape=bevel&box-shadow=10px%2010px%200%2010px%20black">
<style>
body {
margin: 0;
}
#target {
width: 200px;
height: 100px;
box-sizing: border-box;
background: green;
border-style: solid;
border-color: black;
border-width: 0;
}
</style>
<div id="target"></div>
<script>
const target = document.getElementById("target");
const params = new URLSearchParams(location.search);
for (const [k, v] of params) {
target.style[k] = v;
}
</script>