• Post category:CSS

How to Set Image Border Color in HTML | Full Guide

Image Border Color in HTML

In this article, we will see about how to set image border color in HTML. An image can be added to HTML using both the HTML <img> tag and the CSS background-image property. If you don’t know how to set border and border color for an image then this article is mainly for you.

Step-by-Step guide for image border-color

<html>
<head>
<title>Main title</title>
</head>
<style>
img{
border: 5px blue solid;
width="80%"
height="300px"
}
</style>
<body>
<img src="nature.jpg" >
</body>
</html>

Output:

image border color in html

  1. In the above HTML code, we have written the general syntax of HTML.
  2. Then we create <img> tag within the body section. Add the “src” attribute and give value as your image name with extensions like jpg, jpeg, webp, etc.
  3. In style tag, we are going to style the img tag, select the img tag, and style it.
  4. To create a border for an image, we use border property and give value as “size“, “color” and “border-style“. for ex: the above code border is set to be 5px blue solid, 5px is border size, blue is border color, and solid is border style.
  5. We can also set the border color using the border-color property. We can give color value as color name, RGB(), rgba(), and hex code.
  6. See, the above output, As we have set the border color as blue, the border color of the image is displayed in blue color

Leave a Reply