How to create a Circular/Rounded images using CSS ?
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 >w3wiki</ h2 > < h2 > How to create a Circular/ Rounded images using CSS? </ h2 > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" alt = "w3wiki 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 >w3wiki</ h2 > < h2 > How to create a Circular/ Rounded images using CSS? </ h2 > < img src = "img_avatar.png" alt = "w3wiki logo" width = "200" height = "160" border = "5" > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Contact Us