The border helps the users to distinguish various elements. Let’s check how to add a border to an image in HTML using CSS. If you are preferring video then see the YouTube video.
There are three style properties that help to create a border. The first one is border-width which defines the thickness of the border. The next is border-style that defines the type of border. And finally, border-color helps to choose a custom color.
See the code given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.photo {
border-width: 10px;
border-style: solid;
border-color: blue;
}
</style>
<title>Html Image with Border Example</title>
</head>
<body>
<img class="photo" src="./images/bulb.jpg" alt="bulb" />
</body>
</html>Alternatively, you can also border shorthand property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.photo {
border: 10px solid blue;
}
</style>
<title>Html Image with Border Example</title>
</head>
<body>
<img class="photo" src="./images/bulb.jpg" alt="bulb" />
</body>
</html>
See the output below.
That’s how you add border to images in HTML using CSS.
