<div class="block">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ad numquam quo, veniam velit debitis laborum corrupti molestiae est officiis molestias odio quasi architecto, neque quam mollitia, iusto tempora laudantium impedit id quidem hic corporis. Vero excepturi rem quibusdam sed ipsum vel assumenda iste ipsam doloribus tenetur non maiores temporibus, ratione sit placeat eaque quidem asperiores, optio eius fugit? Doloribus facilis assumenda reiciendis, quia quaerat rem temporibus nobis hic. Unde non et debitis inventore, praesentium harum qui libero doloribus ea obcaecati quod sint delectus deleniti vitae minima. Labore, cumque eaque, accusamus possimus molestiae fugit soluta ipsam ad doloribus aspernatur aperiam.
</div>
<p>https://qna.habr.com/q/1383674</p>
body {
  --color: white;
  background: var(--color);
}

.block {
  --r: 10px; /*radius */
  --s: calc(3 * var(--r)); /* width */
  --block-r: 20px;
  padding: calc(2 * var(--r) + 20px) 20px 20px;
  border-radius: var(--block-r);
  background: radial-gradient(
        at top right,
        var(--color) calc(var(--r) - 1px),
        transparent var(--r)
      )
      no-repeat top var(--r) left calc(50% + 2 * var(--r)) / var(--r) var(--r),
    radial-gradient(
        at top left,
        var(--color) calc(var(--r) - 1px),
        transparent var(--r)
      )
      no-repeat top var(--r) left calc(50% - 2 * var(--r)) / var(--r) var(--r),
    radial-gradient(
        at bottom right,
        transparent calc(var(--r) - 1px),
        var(--color) var(--r)
      )
      no-repeat top 0 left calc(50% - var(--r)) / var(--r) var(--r),
    radial-gradient(
        at bottom left,
        transparent calc(var(--r) - 1px),
        var(--color) var(--r)
      )
      no-repeat top 0 left calc(50% + var(--r)) / var(--r) var(--r),
    linear-gradient(
        to right,
        var(--color) 0 calc(50% - var(--s) / 2),
        transparent calc(50% - var(--s) / 2) calc(50% + var(--s) / 2),
        var(--color) calc(50% + var(--s) / 2)
      )
      no-repeat top center / 100% var(--r),
    linear-gradient(
        to right,
        var(--color) 0 calc(50% - var(--s) / 2 - var(--r)),
        transparent calc(50% - var(--s) / 2 - var(--r))
          calc(50% + var(--s) / 2 + var(--r)),
        var(--color) calc(50% + var(--s) / 2 + var(--r))
      )
      no-repeat top center / 100% calc(2 * var(--r)),
    radial-gradient(
        at bottom right,
        transparent calc(var(--block-r) - 1px),
        var(--color) var(--block-r)
      )
      no-repeat top calc(2 * var(--r)) left 0 / var(--block-r) var(--block-r),
    radial-gradient(
        at bottom left,
        transparent calc(var(--block-r) - 1px),
        var(--color) var(--block-r)
      )
      no-repeat top calc(2 * var(--r)) right 0 / var(--block-r) var(--block-r),
    linear-gradient(to top right, blue, pink);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.