CODEWITHSUNDEEP
htmlimagecss
Nur Uddin
Nur Uddin

Reputation: 2948

Css border outside of image width

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

Upvotes: 0

Views: 12311

Answers (5)

Gvidas
Gvidas

Reputation: 1964

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

should do the trick

Upvotes: 0

jbutler483
jbutler483

Reputation: 24529

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.

Upvotes: 4

Khushal Chouhan
Khushal Chouhan

Reputation: 581

Try this:

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

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

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
}

Upvotes: 0

user4563161
user4563161

Reputation:

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;
}

Upvotes: 0

Related Questions