How to create rounded and circular images with CSS?

In this article, we'll see how can we change the shapes of images specifically how can we create a rounded image?
Submitted by Apurva Mathur, on July 27, 2022

Images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services, as stand-alone "a picture is worth a thousand words" meaning-rich tools, and sure, on social media. That is why it's imperative to use appropriate images on your web page; moreover, it's important to reduce the size of an image as low as you can before using them on your webpage as it will help decrease the loading time of the page. We have seen on many WebPages that the images are uploaded in different shapes, have you wondered how a square image is turned into various shapes.

The border-radius property is one of the most common properties of CSS. We often use this property to design box edges and border edges. Now we'll see how we can design the image with this property.

The border-radius property simply curves the edges, the more the value of this property, the more rounded the element will be displayed.

Syntax:

border-radius: (value %);

HTML and CSS code to create rounded and circular images

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         .image_1 {
         border-radius: 50%;
         width: 300px;
         height: 300px;
         }
         .image_2 {
         border-radius: 25%;
         width: 300px;
         height: 300px;
         margin-right: 20px;
         }
         .image_2 {
         border-radius: 35%;
         width: 300px;
         height: 300px;
         margin-right: 20px;
         }
         .image_3{
         border-radius: 20%;
         width: 300px;
         height: 300px;
         margin-right: 20px;
         }
         .image_4{
         border-radius: 5%;
         width: 300px;
         height: 300px;
         }
      </style>
   </head>
   <body>
      <img class="image_1" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
      <img class="image_2" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
      <img class="image_3" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
      <img class="image_4" src="https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg?width=1200&format=pjpg&exif=0&iptc=0">
   </body>
</html>

Output:

Example: Rounded and circular images

Explanation: In the above code, the only border-radius property is applied on all four images, I've tried to explain how different values change the images. The first picture has border-radius:50%, which has turned the image fully rounded, whereas other values show little effect on the image. You can change the values as per your desires. The maximum value which can be used here is 50%, and the minimum value is 1% which will just slightly turn the corners of the image, You can also use the px unit.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.