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
img-rounded Bootstrap class
Use the img-rounded Bootstrap class to style your image and give it rounded corners. This class applies CSS border-radius to create smooth, rounded edges on images.
Syntax
<img src="image-path" class="img-rounded">
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Images</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Styling Images with Bootstrap</h1>
<h2>Original Image</h2>
<img src="https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg"
alt="Original image" width="200">
<h2>Rounded Image</h2>
<img src="https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg"
class="img-rounded" alt="Rounded image" width="200">
</div>
</body>
</html>
Bootstrap Image Classes Comparison
| Class | Effect | Border Radius |
|---|---|---|
img-rounded |
Rounded corners | 6px |
img-circle |
Perfect circle | 50% |
img-thumbnail |
Bordered thumbnail | 4px + border |
Multiple Classes Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Image Styles</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Combining Classes</h2>
<img src="https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg"
class="img-rounded img-responsive" alt="Rounded responsive image" width="300">
</div>
</body>
</html>
Browser Compatibility
The img-rounded class works in all modern browsers that support CSS3 border-radius property, including Internet Explorer 9+ and all versions of Chrome, Firefox, Safari, and Edge.
Conclusion
The img-rounded Bootstrap class provides an easy way to add rounded corners to images. Combine it with other Bootstrap classes like img-responsive for better responsive design.
Updated on: 2026-03-15T23:18:59+05:30
349 Views
Advertisements