Html – Css border outside of image width

csshtmlimage

I want to keep border outside of image width

Let I have image with 75X75 Now I apply 5 px border on the image. still it 75X75 px. border placed inside the image width. But I want border placed outside of image width so total size will be 85X85

I try this code

img {
  border: 5px solid red;
  border-radius: 5px
}
<img src="image.jpg" width="75" height="75" />

Best Solution

I believe you are looking for the box-sizing CSS property,

in which sets the value of whether a border is included in the size of said 'box'

it can be set to either: content-box | padding-box | border-box

div{
  height:100px;
  width:100px;
  background:black;
  border:10px solid gold;
  display:inline-block;
  margin:10px;
  box-shadow:0 0 10px 5px black;
  }
.border-box{
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  }

html,body{
  height:100%;
  background:#222;
  }
<div class="normal"></div>
<div class="border-box"></div>


Please also note

Using inline styling is seen as bad practise, as it can lead to specificality issues further down the line. Wrap your css in a <style> tag or go one better and use an external stylesheet for styling purposes.