Как сделать кружок в css

Вы можете создать круг с помощью CSS, используя свойства border-radius и background-color.

Вот несколько способов создания кругов:

С использованием border-radius и background-color

HTML:

<div class="circle"></div>

CSS:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f00;
}

Здесь мы использовали свойство border-radius с значением 50%, чтобы закруглить углы и создать круг, а также свойство background-color, чтобы установить цвет фона.

С использованием border-radius, width и height и псевдоэлемента before

HTML:

<div class="circle2"></div>

CSS:

.circle2 {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.circle2:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #0f0;
}

Здесь мы создали элемент с имеющим свойство position: relative, а затем добавили пустой псевдоэлемент before с абсолютным позиционированием. Мы использовали свойство border-radius с значением 50%, а также width и height, чтобы задать размеры круга и свойство background-color, чтобы установить цвет фона.

С использованием border-radius, width и height, фона и бордюра

HTML:

<div class="circle3"></div>

CSS:

.circle3 {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #00f;
  border: 5px solid #fff;
  box-sizing: border-box;
}

Здесь мы использовали свойство border с 5px шириной и цветом белого цвета, чтобы создать белую рамку вокруг круга. Мы также использовали свойство box-sizing со значением border-box, чтобы убедиться, что бордер входит в общий размер элемента.

Вы можете изменять цвета, размеры и стили, чтобы создавать различные круги на вашем сайте.