X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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 border to the image.

The <img> element has a border attribute that is not in use after HTML5. So we recommend using the CSS border property instead.

1. 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 alt attribute which gives information about the image if a user cannot view it, for some reason.
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Nature">

2. 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 border property.
img {
width:650px;
border:1px solid black;
}

Example

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

How to Add Styling to the Border Image

For changing the border color you can add the CSS color property to your styling. If you want to have a double border you just need to add the padding property to the style of your image:

Example

<!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>

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

Example

<!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>

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

Example

<!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>

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

Example

<!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>

How to Specify Each Corner and Have Circle Borders

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

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

<!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>

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

<!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>

Do you find this helpful?

Related articles