Fonction CSS inset()

clip-path: inset(30px);

clip-path: inset(1rem 2rem 3rem 4rem);

clip-path: inset(20% 30% round 20px);

clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

shape-outside: inset(20px 50px 10px 0 round 50px);
border-shape: inset(10px 20px 10px 20px round 20px);

<div class="box">
  <div class="shape"></div>
  <p>
    Une nuit de novembre de l'anne 1782, d'aprs la lgende, deux frres
    taient assis prs de leur feu d'hiver dans la petite ville franaise
    d'Annonay, observant les volutes de fume gristres monter dans la large
    chemine. Ils s'appelaient Stephen et Joseph Montgolfier, taient papetiers
    de profession et se distinguaient par leur curiosit scientifique et leur
    got pour les nouvelles dcouvertes. Avant cette nuitqui devait s'avrer
    mmorabledes centaines de millions de personnes avaient vu monter la fume
    de leurs feux sans y prter plus d'attention.
  </p>
</div>

.box {
  width: 400px;
  margin: 0 auto;
}

.shape {
  float: left;
  width: 150px;
  height: 100px;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
  background-color: coral;
  border-radius: 20px;
  margin: 0;
  padding: 20px;
}