CSS Xywh Function Basic

<!DOCTYPE html>
<title>My Example</title>

.xywh-box {
    width: 300px;
    height: 200px;
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    
    /* 
      xywh(X Y Width Height round border-radius)
      X: 50px from the left
      Y: 25px from the top
      Width: 200px wide
      Height: 150px tall
    */
    clip-path: xywh(50px 25px 200px 150px round 20px);
    
    transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
  }

/* Expand the rectangle to reveal the full box on hover */
  .xywh-box:hover {
    clip-path: xywh(0px 0px 300px 200px round 0px);
  }
</style>

<div class="xywh-container">
  <div class="xywh-box">
    Hover Me!
  </div>
</div>