How to Add Border to Image in CSS

Images with borders or frames make the image look more influential and differ from the other content on the page. In this snippet, we will show how to add a border to the image.

The <img> element has a <span class="attribute">border</span> attribute that is not in use in HTML5. So, we recommend using the CSS border property instead.

Create HTML

In the <body> section, create an <img> element and put the link of the image that should be used.
Set the name for the image with the <span class="attribute">alt</span> attribute which gives information about the image if a user cannot view it, for some reason.

How to create an HTML <img> element?

<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />

Add CSS

Add style to your <img> element.
Define the width of the image.
Define the width, style, and color of the border with the help of the <span class="property">border</span> property.

How to style an HTML <img> element?

img {
  width: 270px;
  border: 1px solid black;
}

Example of adding a border to the image:

An example of how to add a border to an image with CSS border property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 270px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-0.5 mb-5"> </div>## How to Add Styling to the Border Image

To change the border color, you can add the CSS color property. If you want to create a double border, you need to add the padding property to the style of your image.

Example of adding a double border to the image:

An example of how to add styling to the border image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 650px;
        padding: 1px;
        border: 1px solid #021a40;
      }
    </style>
  </head>
  <body>
    <h2>Double Border Example</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Try it Yourself »

It is also possible to have a double border with different inside border color. For that purpose, add the background-color property.

Example of styling the double border of the image:

An example of double border with different inside border color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 650px;
        padding: 5px;
        border: 8px solid #999999;
        background-color: #e6e6e6;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Try it Yourself »

In our next example, we add a border to the image and use a colored background. If you want to increase the width of the frame, add more padding.

Example of framing an image with a colored background:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .nature {
        background: #b0afac;
        padding: 12px;
        border: 1px solid #999;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" height="256" alt="Nature" class="nature" />
  </body>
</html>

Try it Yourself »

It is also possible to frame an image with a caption.

Example of adding a caption:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .img-frame-cap {
        width: 200px;
        background: #fff;
        padding: 18px 18px 2px 18px;
        border: 1px solid #999;
      }
      .caption {
        text-align: center;
        margin-top: 4px;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="img-frame-cap">
      <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" width="200" height="256" alt="Nature" />
      <div class="caption">Nature</div>
    </div>
  </body>
</html>

Try it Yourself »

You can also specify borders separately. For that purpose, use CSS border-bottom, border-top, border-left, and border-right properties and set different width values for each. Let's see an example in which the <span class="property">border-bottom</span> property is set to have an effect like a banner.

Example of specifying borders separately:

An example in which the border-bottom property is set to have an effect like a banner.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 225px;
        border: 8px solid #ccc;
        border-bottom: 130px solid #ccc;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature" />
  </body>
</html>

Try it Yourself »

To add styling to your image border, add the border-style property to the <style> element.

Example of styling the border image with the border-style property:

An example of how to add border to Image using CSS border-bottom property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 650px;
        padding: 5px;
        border: 12px #1c87c9;
        border-style: dashed;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Try it Yourself »

How to Specify Each Corner and Create Circle Borders

To specify each corner of the border, you need to use the CSS border-radius property. The border-radius property can have one to four values. Let’s see an example with four values.

Tip

Remember that the first value applies to the top-left corner, the second value applies to the top-right edge, the third value refers to the bottom-right corner, and the fourth value applies to the bottom-left corner.

Example of specifying each corner of the image border:

An example of how to add border to image using CSS border-style property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 650px;
        padding: 2px;
        border: 3px solid #1c87c9;
        border-radius: 15px 50px 800px 5px;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature" />
  </body>
</html>

Try it Yourself »

Instead of trying to nest the image inside another element, or editing every image in photoshop to achieve a proper look for your image border, you need to set the value of the border-radius property to "50%" or "999em". Set the same width and height values.

Example of adding a circle border to the image:

An example of how to create circle borders

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.imageborder {
        border-radius: 999em;
        width: 350px;
        height: 350px;
        padding: 5px;
        line-height: 0;
        border: 10px solid #000;
        background-color: #eee;
      }
      img {
        border-radius: 999em;
        height: 100%;
        width: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h2>Circle Border Example</h2>
    <div class="imageborder">
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" height="350" width="350" alt="iceland"/>
    </div>
  </body>
</html>

Try it Yourself »

How to Add a Drop Shadow Under the Image Border

To add a drop shadow, we need to use the box-shadow property. Also, set the display property to "block".

Example of adding a drop shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .nature {
        display: block;
        background: transparent;
        padding: 8px;
        border: 1px solid #ccc;
        box-shadow: 10px 10px 10px #999;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/02/7f55a71df52da6d26ef4963f78aed38d64a7874c.jpeg" alt="Nature" class="nature" />
  </body>
</html>

Try it Yourself »

Two different border styles:

Let's get into another cool example. Here we'll make two different border styles for our image. To this, we'll use the <u>box-shadow</u>, <u>border</u>, and <u>outline</u> properties.

Add this simple markup:

How to Add Border to Image in CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <style>
    .container {
      padding: 20px;
    }
    #nature-image {
      border: 5px solid violet; /* inner border */
      outline: 3px dotted tomato; /* outer border */
      outline-offset: 10px; /* gives some space between two borders */
    }
  </style>
  <body>
    <div class="container">
      <img src="https://i.ibb.co/fMTGnRz/pexels-photo-572897.jpg" alt="snow-nature" height="300px" width="300px" id="nature-image" />
    </div>
  </body>
</html>

Try it Yourself »

Here's the result:

<div class="demo px-2.5 mt-0.5 mb-5 border-none"> </div>It's pretty self-explanatory. We used an image tag <u>id</u> and selected it in our CSS. Then we used the <span class="attribute">border</span> for the inner border and an <span class="attribute">outline</span> for the outer border around our image. And finally, by using <span class="attribute">outline-offset</span>, we make room between two borders.

Another way of having two borders around an image is by using the <span class="attribute">box-shadow</span> property. It's pretty straightforward, and just one line of code and, in some cases, is so helpful.

How to Add Border to Image in CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <style>
    .container {
      padding: 20px;
    }
    #nature-image {
      box-shadow: 0 0 0 5px violet, 0 0 0 10px tomato; /* add this line,  values are  inset | offset-x | offset-y | color , we just use the color */
    }
  </style>
  <body>
    <div class="container">
      <img src="https://i.ibb.co/fMTGnRz/pexels-photo-572897.jpg" alt="snow-nature" height="300px" width="300px" id="nature-image" />
    </div>
  </body>
</html>

Try it Yourself »

<div class="demo px-2.5 mt-0.5 mb-5 border-none"> </div>The tip is that the second colour size should be doubled if you want two equal-sized borders. For example, we have the violet-coloured border set to 5px, and then we set the tomato-coloured one to 10 px.

Hope you've enjoyed the examples.