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>

Answer 2

A possible solution is adding spans, with an absolute positioning, and style each of them to match a simple form in the final result.

note: Don't forget to create a blue background for the h1 tag, and add the spans above that.

For example, for the most left small half circle, you might want to make a blue circle, and place it with its center aligning with the bottom line of the h1 background.

It will take some time, so I recommend to still consider an image.

Answer 3

it can be done using HTML and CSS.

.car {
  width: 300px;
  height: 100px;
  background-color: blue;
  position: relative;
}

.wheel {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
}

.small_wheel {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
}

.wheel.right {
  border: 30px solid blue;
  top: 44px;
  left: 150px;
  background: transparent;
}

.left {
  top: 65px;
  left: 70px;
}

.small_wheel_left {
  background-color: blue;
  top: 65px;
  left: 170px;
  top: 95px;
  left: 40px;
}

<div class="car"></div>
<div class="wheel right"></div>
<div class="wheel left"></div>
<div class="small_wheel small_wheel_left"></div>