Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create rounded image with CSS
Creating rounded images in CSS is achieved using the border-radius property. This property allows you to round the corners of any element, including images, making them appear circular or with softly rounded edges. This technique is commonly used for profile pictures, thumbnails, and decorative elements.
Syntax
img {
border-radius: value;
}
Possible Values
| Value | Description |
|---|---|
50% |
Creates a perfect circle (most common for rounded images) |
length |
Specific radius in px, em, rem, etc. |
% |
Percentage of the element's dimensions |
Example 1: Circular Image
The following example creates a perfectly circular image using border-radius: 50% −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
padding: 20px;
}
.circular-image {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ddd;
}
</style>
</head>
<body>
<h2>Circular Image</h2>
<img src="/css/images/logo.png" alt="Logo" class="circular-image">
</body>
</html>
A perfectly circular image with a light border appears centered on the page with equal width and height of 200px.
Example 2: Rounded Corner Image
This example shows how to create an image with moderately rounded corners −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
padding: 20px;
}
.rounded-image {
width: 250px;
height: 150px;
border-radius: 25px;
object-fit: cover;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<h2>Rounded Corner Image</h2>
<img src="/css/images/logo.png" alt="Logo" class="rounded-image">
</body>
</html>
A rectangular image with 25px rounded corners and a subtle shadow effect appears on the page.
Key Points
- Use
border-radius: 50%for perfect circles - The
object-fit: coverproperty ensures the image fills the container properly - For circles, ensure the image container has equal width and height
- Add borders or shadows to enhance the visual effect
Conclusion
The border-radius property is essential for creating rounded images in CSS. Use 50% for circular images or specific pixel values for rounded corners to enhance your website's visual appeal.
Updated on: 2026-03-15T12:48:54+05:30
2K+ Views
Advertisements