I set padding-right directly on my image for a specific reason. However, now I want to add a border style but only to the image itself. I attempted using the box-sizing method without success.
img{
padding-right: 1em;
border: 5px solid red;
}
<img src='path.jpg' />
I need to keep the padding but apply the border exactly to the edge of the image. How can I achieve this?
Update:
Is there a way to make it work like an after pseudo-class?
img:after{
content: " ";
border: 5px solid red;
width: 100%;
height: 100%;
}
Adding margins or placing a span before the image will not work in my situation because the image is set to width: 100%;. Here is an example demo: http://jsfiddle.net/Ab77g/17/