inset() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.clipped-element {
  width: 400px;
  height: 300px;
  display: block;

  /* inset(top right bottom left round border-radius) */
  clip-path: inset(20px 50px 20px 50px round 20px);
  
  transition: clip-path 0.4s ease;
}

/* Hover effect to show the original size */
.clipped-element:hover {
  clip-path: inset(0px 0px 0px 0px round 0px);
}</style></head><body><div class="container">
  <img src="https://picsum.photos/id/10/400/300" alt="Landscape" class="clipped-element">
</div></body></html>