Как нарисовать полукруг на CSS

border-radius: сделать полукруглым HTML-элемент

Полукруг получается если у прямоугольника, у которого одна сторона в два раза больше другой, закруглить углы [см. генератор]. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины "резинового" блока.

<style>
.radius {
  width: 10em;
  height: 5em;  /* высота в два раза меньше ширины, иначе получится полуовал */
  border: 2px solid red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;  /* угол состоит из половины ширины (50% от 10em = 10em : 2 = 5em) и всей высоты (100% от 5em = 5em) */
  background: mistyrose;
}
</style>

<div class="radius">текст</div>

Содержимое, выходящее за границы полукруга с overflow: hidden;, невидно.

<style>
.radius {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  overflow: hidden;
  background: mistyrose;
}
</style>

<div class="radius">текст</div>

<style>
.radius {
  width: 10em;
  height: 15em;
  border: 2px solid red;
  border-radius: 500em 500em 0 0;  /* можно сохранить дугу для элементов разнообразных размеров, если задать очень большое значение для двух углов */
  background: mistyrose;
}
</style>

<div class="radius"></div>

<style>
.radius {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: mistyrose;
}
</style>

<div class="radius"></div>

<style>
.radius {
  width: 5em;  /* ширина в два раза меньше высоты, иначе получится полуовал */
  height: 10em;
  border: 2px solid red;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  background: mistyrose;
}
</style>

<div class="radius"></div>

<style>
.radius {
  width: 5em;
  height: 10em;
  border: 2px solid red;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  background: mistyrose;
}
</style>

<div class="radius"></div>

clip-path: отсечь лишний фрагмент HTML-элемента

Свойство clip-path вырезает из элемента часть:

<style>
.radius {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  clip-path: inset(0 round 50% 50% 0 0 / 100% 100% 0 0);  /* значения после round указывают насколько нужно округлить элемент, что равносильно записи clip-path: ellipse(50% 100% at 50% 100%); */
  background: mistyrose;
}
</style>

<div class="radius">текст</div>

<style>
.radius {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  clip-path: circle(50% at center bottom);
  background: mistyrose;
}
</style>

<div class="radius">текст</div>

С помощью shape-inside

Свойство shape-inside позволяет вписать текст в окружность, даже без самой окружности, но пока не поддерживается браузерами.

<style>
.radius {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  shape-inside: inset(-2px round 50% 50% 0 0 / 100% 100% 0 0);
  background: mistyrose;
}
</style>

<div class="radius">текст</div>