Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Add a Border to an Image
The following is the code to add a border to an image using CSS. We have set the border in the img element −
img {
border: 8px solid rgb(0, 238, 255);
width: 400px;
height: 400px;
}
Example
Let us see an example to add a 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="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
Add Style to the Image Border
If you want to set a border, adding a style to the border on an image is required. Various styles are available for a border −
Dotted − Used to specify a dotted border
Dashed − Used to specify a dashed border
Solid − Used to specify a solid border
Double − Used to specify a double border
Example
If you won’t set the border color, it will automatically set it to black. Let us see an example to add style to the image border −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: dotted;
}
p {
border: dashed;
}
img {
border: solid;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Set the border...</p>
<img src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
Add Color to the Image Border
Using the border property, we can easily set the border color. However, to mention the border style is required. Let us see an example to add color to the image border −
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: dotted red;
}
p {
border: dashed green;
}
img {
border: solid blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Set the border...</p>
<img src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
Add Width to the Image Border
Using the border property, we can easily set the border width. However, to mention the border style is required. Let us see an example to add width to the image border −
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px dotted red;
}
p {
border: 5px dashed green;
}
img {
border: 6px solid blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Set the border...</p>
<img src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
Create Rounded Images With Border
The border-radius property is used to create rounded images. To set a border, use the border property. Let us see an example to create rounded images with border −
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 3px dotted red;
}
p {
border: 5px dashed green;
}
img {
border: 6px solid blue;
border-radius: 30px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>Border Around Image Example</h1>
<p>Create rounded border...</p>
<img src="https://www.tutorialspoint.com/scala/images/scala-mini-logo.jpg">
</body>
</html>
448 Views
