Shobha
The best way to predict the future is to invent it
How do you create a circular image in CSS?
To achieve a circular image in CSS, you can use the border-radius property. First, ensure that the image is square by making the width and height equal, then apply border-radius: 50% to give the image rounded corners, effectively creating a circle. Additionally, to make sure the image fits within the circle without distortion, you can use object-fit: cover to maintain its aspect ratio. For example:
img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}