Blitz - WPT: corner-shape-svg-border.html

wpt / css / css-borders / corner-shape / corner-shape-svg-border.html

/css/css-borders/corner-shape/corner-shape-svg-border.html

<!DOCTYPE html>
<link rel="match" href="corner-shape-img-border-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shape">
<meta name="fuzzy" content="maxDifference=0-92;totalPixels=0-255">
<style>
img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  corner-shape: bevel scoop notch square;
  box-sizing: border-box;
  border: 20px solid blue;
  object-fit: cover;
}
</style>
<img src="data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(0,255,0)' d='M0 0h200v200H0z'/%3E%3C/svg%3E">

/css/css-borders/corner-shape/corner-shape-img-border-ref.html

<!DOCTYPE html>
<style>
div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  corner-shape: bevel scoop notch square;
  box-sizing: border-box;
  border: 20px solid blue;
  background: url(/images/green.png);
}
</style>
<div></div>