Circle Div - CSS

CSS provides several ways to create circle divs. Here are some of the popular methods:

Method 1 - Using border-radius

One of the easiest ways to create a circle div is to use the border-radius property. Set the border-radius property to 50% and the width and height of the div to the same value.

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

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

Method 2 - Using transform

Another way to create a circle div is to use the transform property. Set the scale value to 1 and the border-radius property to 50%. This method works best if you want to animate the circle div using CSS.

.circle-div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  transform: scale(1);
}

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

Method 3 - Using SVG

If you want to create a circle div with a gradient or a pattern, you can use an SVG element as the background of the div.

<div class="circle-div">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="url(#gradient)" />
    <defs>
      <linearGradient id="gradient">
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="orange" />
      </linearGradient>
    </defs>
  </svg>
</div>

.circle-div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Conclusion

Creating a circle div is easy with CSS. Depending on your needs, you can choose one of the methods mentioned above.