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.

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

Add style to your <img> element, define width and height and with the help of the border property define border width, style and color.

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-color property.

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>


Related articles