Blitz - WPT: corner-shorthand-rendering.html

wpt / css / css-borders / corner-shape / corner-shorthand-rendering.html

/css/css-borders/corner-shape/corner-shorthand-rendering.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Borders 4: corner shorthand rendering</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shorthand">
<link rel="match" href="corner-shorthand-rendering-ref.html">
<style>
  .box {
    width: 160px;
    height: 160px;
    border: 24px solid rgb(0 128 0);
    background: rgb(240 240 240);
    corner: 36px round / 18px bevel / 28px scoop / 20px notch;
  }
</style>
<div class="box"></div>

/css/css-borders/corner-shape/corner-shorthand-rendering-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Borders 4: corner shorthand rendering reference</title>
<style>
  .box {
    width: 160px;
    height: 160px;
    border: 24px solid rgb(0 128 0);
    background: rgb(240 240 240);
    border-top-left-radius: 36px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 28px;
    border-bottom-left-radius: 20px;
    corner-top-left-shape: round;
    corner-top-right-shape: bevel;
    corner-bottom-right-shape: scoop;
    corner-bottom-left-shape: notch;
  }
</style>
<div class="box"></div>