Круг

• Полукруг CSS
• Надпись по кругу CSS
• Заполняющийся круг CSS

border-radius: округлить HTML-элемент

Круг получается из квадрата (ширина = высота) с закруглёнными углами. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины "резинового" блока.

Круглая картинка

<style>
.round {
  border-radius: 50%;
}
</style>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKlWCzJTgO1-9wLjMnmKArrzkUu9CGayKMm2d0sy0W23enfxAupZzjcW8A2JkHTHBxfg8L7LA7lEg_07_555ezhFiCS0urfcOTZdAXJolfKsCqfUBDque_PNjg3WhKIUR3J_h2ac9iwjx/s0/background.jpg" alt="На голубом фоне смайлик" width="120" height="120" class="round">

Круглый блок с текстом

Содержимое выходит за границы круга.

Слово1 да слово2 да слово3 да слово4

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

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

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

Слово1 да слово2 да слово3 да слово4

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

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

clip-path: обрезать HTML-элемент

Содержимое, выходящее за границы контура в clip-path, невидно.

Слово1 да слово2 да слово3 да слово4

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

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

Слово1 да слово2 да слово3 да слово4

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

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

shape-inside: текст в круге

Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside. Но на момент написания статьи нет поддержки браузерами.

Слово1 да слово2 да слово3 да слово4

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

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

Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √2

Слово1 да слово2 да слово3 да слово4

<style>
.round {
  width: 10em;
  height: 10em;
  border: 2px solid red;
  border-radius: 50%;
  padding: 1.4644em;  /* или padding: calc((100% - 100% / 1.4142) / 2);, где 100% = 10em — это значение width, а √2 ≈ 1.4142 */
  box-sizing: border-box;  /* чтобы padding не увеличивал ширину и высоту элемента */
  background: mistyrose;
}
</style>

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

Можно нарисовать символ либо картинку в центре круга

Слово1

<style>
.round {
  width: 10em;
  height: 10em;
  border: 2px solid red;
  border-radius: 50%;
  line-height: 10em;  /* подробнее про line-height */
  text-align: center;  /* выравнять текст по середине по горизонтали */
  background: mistyrose;
}
</style>

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

radial-gradient в background: круглый фон

Когда нужна круглая фоновая картинка.

Слово1 да слово2 да слово3 да слово4

<style>
.round {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  background-color: mistyrose;
  background-image: radial-gradient(circle closest-corner at 25% 50%, #fff 50%, transparent 50%);
}
</style>

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

Слово1 да слово2 да слово3 да слово4

<style>
.round {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  background-color: mistyrose;
  background-image: radial-gradient(circle closest-corner at 25% 50%, #fff 50%, transparent);
}
</style>

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

radial-gradient в mask: наложить маску на HTML-элемент

Слово1 да слово2 да слово3 да слово4

<style>
.round {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  mask: radial-gradient(circle closest-corner at 25% 50%, #fff 50%, transparent);
  background: mistyrose;
}
</style>

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

SVG в background: фоновое круглое изображение

То, что не поддаётся radial-gradient.

Слово1 да слово2 да слово3 да слово4

<style>
.round {
  width: 10em;
  height: 5em;
  border: 2px solid red;
  background-color: mistyrose;
  background-repeat: no-repeat;  /* круг используется единожды и не повторяется */ 
  background-position: left top;  /* круг прижат к левому или верхнему краю */ 
  background-size: contain;  /* радиус_круга = короткая_сторона : 2 */ 
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 2 2%22%3E %3Ccircle r=%221%22 cx=%221%22 cy=%221%22 fill=%22%23fff%22/%3E %3C/svg%3E');  /* круг в SVG, который в свою очередь в схеме data:URL */ 
}
</style>

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