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
How to add a border to an image with CSS?
To add a border to an image, use the border property and set it to the <img> element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc.
Syntax
img {
border: width style color;
}
Basic Border Example
The following example adds a solid border to an image −
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<img src="/scala/images/scala-mini-logo.jpg" alt="Scala Logo">
</body>
</html>
A square image with an 8px solid cyan border appears on the page.
Border Style Variations
You can apply different border styles to images. The common border styles include −
solid − Creates a solid line border
dotted − Creates a dotted border
dashed − Creates a dashed border
double − Creates a double line border
<!DOCTYPE html>
<html>
<head>
<style>
.dotted-border {
border: 5px dotted blue;
width: 200px;
height: 200px;
margin: 10px;
}
.dashed-border {
border: 5px dashed green;
width: 200px;
height: 200px;
margin: 10px;
}
.solid-border {
border: 5px solid red;
width: 200px;
height: 200px;
margin: 10px;
}
</style>
</head>
<body>
<img src="/scala/images/scala-mini-logo.jpg" class="dotted-border" alt="Dotted border">
<img src="/scala/images/scala-mini-logo.jpg" class="dashed-border" alt="Dashed border">
<img src="/scala/images/scala-mini-logo.jpg" class="solid-border" alt="Solid border">
</body>
</html>
Three images are displayed side by side: one with a blue dotted border, one with a green dashed border, and one with a red solid border.
Border Width and Color
You can customize both the width and color of image borders −
<!DOCTYPE html>
<html>
<head>
<style>
.thin-border {
border: 2px solid purple;
width: 150px;
height: 150px;
margin: 10px;
}
.thick-border {
border: 10px solid orange;
width: 150px;
height: 150px;
margin: 10px;
}
</style>
</head>
<body>
<img src="/scala/images/scala-mini-logo.jpg" class="thin-border" alt="Thin border">
<img src="/scala/images/scala-mini-logo.jpg" class="thick-border" alt="Thick border">
</body>
</html>
Two images are displayed: one with a thin purple border and one with a thick orange border.
Rounded Image Borders
Use the border-radius property along with border to create rounded image borders −
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-image {
border: 6px solid #4CAF50;
border-radius: 30px;
width: 300px;
height: 300px;
}
.circular-image {
border: 8px solid #ff6b6b;
border-radius: 50%;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src="/scala/images/scala-mini-logo.jpg" class="rounded-image" alt="Rounded corners">
<img src="/scala/images/scala-mini-logo.jpg" class="circular-image" alt="Circular border">
</body>
</html>
Two images are displayed: one with rounded corners and a green border, and one completely circular with a red border.
Conclusion
The CSS border property provides a simple way to add borders to images. You can customize the width, style, and color, and combine it with border-radius for rounded effects.
2K+ Views
