CSS Circle

Introduction

In CSS, a circle can be created using the border-radius property. By setting the value of border-radius equal to half the width and height of the element, a perfect circle can be created.

Example

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

This CSS will create a circle with a diameter of 100 pixels.

Animation

CSS can be used to animate the circle. For example, the transform property can be used to rotate the circle.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

This CSS will create a circle with a diameter of 100 pixels and rotate it infinitely for 2 seconds.

Gradients

Gradients can also be applied to circles. This can be done by adding a background property with a radial-gradient function to the CSS.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ff5050 0%, #ffafaf 100%);
}

This CSS will create a circle with a diameter of 100 pixels that has a radial gradient background.

Conclusion

In conclusion, CSS provides many ways to create and customize circles. Whether it's through animations or gradients, circles can be made to fit any design.