How to create a Circular/Rounded images using CSS ? Improve Improve Like Article Like Save Share Report In this article, we will create a rounded image with CSS. It can be done by using the CSS border-radius property. This property is mainly used to make round shapes. It contains a numeric value in the form of pixels. Example 1: HTML <!DOCTYPE html> <html> <head> <style> img { border-radius: 58%; } </style> </head> <body> <h2>GeeksForGeeks</h2> <h2> How to create a Circular/ Rounded images using CSS? </h2> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo" width="200" height="160" border="5"> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <style> img { border-radius: 38%; } </style> </head> <body> <h2>GeeksForGeeks</h2> <h2> How to create a Circular/ Rounded images using CSS? </h2> <img src="img_avatar.png" alt="GeeksforGeeks logo" width="200" height="160" border="5"> </body> </html> Output: Supported Browsers: Google Chrome Internet Explorer Firefox Safari Opera Last Updated : 20 Dec, 2020 Like Article Save Article Previous Shrink Text on Hover using HTML and CSS Next How to get the height of a div using jQuery ? Share your thoughts in the comments Add Your Comment Please Login to comment...