Create Circular Image with CSS and HTML

Circular Image

Learn how to create rounded image in html.

how to make an image circular in html

circular image

You can read this page to Learn how to create round image with css and html, that can be used to display a rectangle image as circular image on your website.

Note: for better effect use square images, rectangular images.

Circular Image CSS

Add following circular image css code. if you need to add css code, you can read that article on this page to how to add CSS code.

/* aroed circular image css code */
<style>
.circular--square {
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}
</style>

Note: If you are using Blogspot, go to "Edit HTML" and add it just before ]]></b:skin> tag.

Circular Image HTML

Now when you want to make an image circular, just add below html code.

<img class="circular--square" src="IMAGE URl HERE" alt="IMAGE NAME HERE" style="width:200px" />

Note: you can also made changes in this code to customize circular image view as per your choice.

Please change following details with your own details
1. src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3AsdNb4kdC2Amidb2RoPlk_Sdf6EUfYWBBim7iAE36eZUJ-gQRvFSAFdE9mzDOMETvKatAGN6A4hwjos4CQS4HUyNAOQ72Af11tZmX60V7y_KP4YAphMGzlqxiv-Hthf3JdPScAGqO3C/s1600/Aroed.jpg" - update with your photo url.

2. alt="aroed.blogspot.com" - update with your picture name.

3. style="width:200px" - change only "200px" with your required round image size.

Look at the example below:
(250px   |   200px   |    150px)

I hope now you get all the information about How to create round image with css and html.

Now it's your turn

If you like this amazing post then leave a comment below and tell is this helpful for you or not.

{Sharing Is Caring} – If you believe in this then share this article now

Share if you believe in Sharing is Caring