How to create border with half circular shape on one side

Question

Let's say I have a header tag like <h1>Menu</h1>

And I want to create a css rule to style it. First, with a blue background color. Then, near the lower right corner of the banner, I want it to style like the image below. Wondering how I can achieve that look.

This is the border style I want to achieve: Border style wanted

Seems really hard to achieve with css. Is there an easier way? I don't want it to be an image.

Answer 1

Create this with a :before and :after pseudo-elements + a mask for the "hole".
Somehow:

.menu {
  --d: 30px;
  --background: blue;
  --padding-bottom: calc(2 * var(--d));
  min-height: calc(3 * var(--d));
  padding-bottom: var(--padding-bottom);
  background: var(--background) content-box;
  position: relative;
  -webkit-mask: radial-gradient(var(--d) at calc(4 * var(--d)) calc(100% - var(--padding-bottom)), #0000 98%, red);
          mask: radial-gradient(var(--d) at calc(4 * var(--d)) calc(100% - var(--padding-bottom)), #0000 98%, red);
  box-sizing: content-box;
}

.menu:before,
.menu:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  top: calc(100% - var(--padding-bottom));
  transform: translateY(-50%);
  box-sizing: border-box;
}

.menu:before {
  left: calc(2 * var(--d));
  background: var(--background);
  width: var(--d);
}

.menu:after {
  left: calc(5 * var(--d));
  width: calc(4 * var(--d));
  border: solid var(--d) var(--background);
}

/* This is just for demonstration */
body {
  margin: 0;
  background: linear-gradient(orange, yellow);
  min-height: 100vh;
}

<div class="menu"></div>