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 =
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