How to Add Border to an Image Using HTML and CSS?

How to Add Border to an Image Using HTML and CSS?

Last Updated : 15 Nov, 2024

Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.

Syntax

.img-class {
    border: 1px solid black;
}

Adding a Border To An Image With HTML and CSS

Create a CSS class named .image to style the image, including its width, height, and border.
In the CSS, set the image width to 300px and the height to auto so it maintains its aspect ratio.
Use the border property in the CSS class to add a solid black border that is 5px wide around the image.
Add the class name image to the <img> tag in the HTML to apply the styles defined in the CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .image {
            width: 300px;
            height: auto;
            border: 5px solid black;
        }
    </style>
</head>

<body>
    <img class="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp"
        alt="Image">
</body>

</html>

Output

image-border

How to Add Border to an Image Using HTML and CSS?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Add an Iframe Border using CSS ?

This article will show you how to add a border to the iframe element using CSS. An inline frame is used to embed another document within the current HTML document. To add the iframe border, we will use the CSS border property. Syntax:<style> iframe { bord

How to Add Border Around Text using CSS?

The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntaxborder: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS.HTML<p> The following text has a border <span st

How to Add Image in Text Background using HTML and CSS ?

In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired imag

How to Add a Login Form to an Image using HTML and CSS?

The login form on an Image is used on many websites. Like hotel websites that contain pictures of the hotels or some organizations that organize special events holding that event picture and login form. In that case, you can design a login or registration form on that picture. This design will make

How to add a button to an image using CSS ?

In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope

How To Create a Thumbnail Image using HTML and CSS ?

The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye

How to create a Hero Image using HTML and CSS ?

A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The

How to Create Avatar Images using HTML and CSS ?

This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu

How to repeat border image using CSS ?

You can repeat border images using the border-image-repeat property in CSS. It is generally used for scaling and tiling the border-image. It is used to match the middle part of the border-image to the size of the border.Syntax:border-image-repeat: stretch|repeat|round|initial|inheritNote: The border

How to add a mask to an image using CSS ?

The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper