Css border outside of image width

Question

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" /> 

Answer 1

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

Answer 2

尝试这个：

<img style="height:75px; width:75px; padding:2px; border:2px solid red">

Answer 3

Try like this: Demo

img {
    width:75px;
    height:75px;
    outline: 5px solid red
}

Updated demo

You can use Border and border-radius itself, and its working as you expected.

img {
    width:75px;
    height:75px;
    border: 5px solid red;
    border-radius: 5px
}

Answer 4

you need to add this to your css

 html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } 

Answer 5

<img src="image.jpg" width="75" height="75" style="border: 5px solid red; border-radius: 5px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;" />

应该可以