How to make a CSS circle

Learn how to create an attractive, circular shape using CSS with a step-by-step example.

CSS Circle

Creating a circle with only CSS is very simple. All you need to do is set the div or element with a width and height that are equal, and then add a border-radius of 50%. This will result in a perfect circle.

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

In the example above, we have given the .circle class a width and height of 200px, and a border-radius of 50%. This will create a perfect circle with a grey background color.

You can also add a border to the circle if you wish. All you need to do is add a border property to the class, and set the color and width of the border.

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  border: 2px solid #333;
}

In the example above, we have added a 2px solid border with a color of #333 to the circle.

You can also add other properties to the class, such as a box-shadow or a transition. This can be used to create interesting and unique effects.

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ccc;
  border: 2px solid #333;
  box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5);
  transition: all 0.3s;
}

In the example above, we have added a box-shadow with a color of rgba(0,0,0,0.5) and a transition of all 0.3s. This will create a subtle shadow effect when the circle is hovered over.

Creating a circle with CSS is very simple, and can be used to create interesting and unique effects.