CSS has a vast collection of styles and properties that can be used to customize and enhance the look and feel of web pages.
One of the most popular styling elements that can be added to images is rounded and circular shapes.
These shapes add a touch of elegance and sophistication to your website design and can be used in various ways such as profile images, product images, and more.
In this CSS tutorial, we’ll discuss how to create rounded and circular images with CSS and provide you with code examples to help you get started.
Rounded Images
Rounded images are a great way to add a soft touch to your web page design.
They can be used as profile images, product images, or even as a background image.
To create a rounded image, you can use the CSS property “border-radius.”
The border-radius property takes a value in pixels and rounds the corners of an element.
For example, to create an image with a 50px border radius, the CSS code would look like this:
img {
border-radius: 50px;
}If you want to create rounded corners for only specific sides of an image, you can use the following CSS code:
img {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}Circular Images
Circular images are similar to rounded images, but they create a perfect circle around the image.
To create a circular image, you can use the same CSS property, “border-radius,” and set the value to half of the width and height of the image.
Here is an example of how to create a circular image using CSS:
img {
width: 200px;
height: 200px;
border-radius: 50%;
}In the example above, the width and height of the image are set to 200px and the border-radius is set to 50%.
This creates a perfect circle around the image.
Conclusion
Creating rounded and circular images with CSS is a simple and effective way to enhance the look and feel of your web page.
By using the border-radius property, you can easily create rounded corners or a perfect circle around your images.
Whether you’re using them as profile images, product images, or for a background, rounded and circular images can add a touch of elegance and sophistication to your website design.
So, go ahead and start experimenting with rounded and circular images on your website today!
