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

Окружность в CSS можно создать несколькими способами.

Способ 1: при помощи свойств border-radius и width (или height) с одинаковыми значениями.

HTML:

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

CSS:

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

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

Способ 2: при помощи свойства border-radius и padding с одинаковыми значениями.

HTML:

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

CSS:

.circle {
  border-radius: 50%;
  padding: 50px;
  background-color: green;
}

В данном примере мы использовали свойство padding, чтобы задать размеры круга. Также задали цвет фона с помощью background-color.

Способ 3: при помощи псевдоэлемента ::before и свойства content.

HTML:

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

CSS:

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

.circle::before {
  content: '';
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: inherit;
}

В данном примере мы создали элемент div с классом circle и задали ему свойства width, height и background-color, а также свойство position: relative для задания координат псевдоэлемента. Далее мы создали псевдоэлемент ::before и задали ему свойства content: », border-radius: 50%, width и height в 100%, чтобы сделать его круглым. Затем мы задали свойство position: absolute, чтобы закрепить псевдоэлемент с левым верхним углом своего родительского элемента. Свойством top и left задали координаты, соответствующие краям элемента, а свойством background-color: inherit унаследовали цвет фона у родительского элемента.