css: border on an image, not outside it

When you apply a 开发者_如何学JAVAborder: 5px solid #000; on an image, the border appears around / outside the image. Is there a way of placing the border "on" the image so that it masks the 5 outer pixels of the image?

As has been said, wrap the image in a container div. But, the container div must be smaller than the image, and the widths, heights, positions, and thicknesses coordinated.

Like so:

<style>
    #ImgBorder {
        width:      440px;  /*Set to picture  width minus 2 times border thickness.*/
        height:     327px;  /*Set to picture height minus 2 times border thickness.*/
        margin:     0;
        padding:    0;
        border:     5px solid #000;
        overflow:   hidden
    }
    #ImgBorder img {
        width:      450px;  /*Set to picture width.*/
        height:     337px;  /*Set to picture height.*/
        margin:     0;
        padding:    0;
        border:     none;
        position:   relative;
        top:        -5px;   /*Adjust by border thickness.*/
        left:       -5px;   /*Adjust by border thickness.*/
    }
</style>

<div id="ImgBorder">
    <img src="http://bioweb.uwlax.edu/bio203/s2008/kwong_hoi/images/Adorable-Cats-Screensaver.jpg">
</div>

Update: jQuery solution:

You can see it in action at jsFiddle.

<script type="text/javascript">
    $(window).load (jQueryMain);

    function jQueryMain () {
        var BorderWidthPx   = 5;

        //--- Put frame div around marked
        $("img.FrameMe").wrap ('<div class="FrameMe">');

        $("img.FrameMe").each ( function () {
            //--- Adjust dimensions of Frame.
            $(this).parent ()[0].style.width    = ($(this).outerWidth  (true) - 2*BorderWidthPx) + 'px';
            $(this).parent ()[0].style.height   = ($(this).outerHeight (true) - 2*BorderWidthPx) + 'px';

            //--- Set positioning
            $(this).css ( {
                'top': -1*BorderWidthPx + 'px', 'left': -1*BorderWidthPx + 'px', 'position': 'relative'
            } );
        } );
    }
</script>
<style>
    div.FrameMe {
        margin:     0;
        padding:    0;
        border:     5px solid #000;
        overflow:   hidden
    }
    img.FrameMe {
        /* Will set dimensions and positioning with jQuery. */
        margin:     0;
        padding:    0;
        border:     none;
    }
</style>

<img class="FrameMe" src="http://i.stack.imgur.com/aAAeG.jpg">

Maybe something along this lines (only sides, not top bottom, but you get the point)

<div style="border: red 10px solid; width: 320px; overflow: hidden;">
<img src="blah.png" style="position: relative; left: -5px;">
</div>

There is another option, which is add a inner div to the image container:

<div class='img-container'>
  <img src="img/img.png" />
  <div class='img-border'></div>
</div>

<style>
  .img-container {
    position: relative;
  }

  .img-border {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;

    border: 6px solid red;
  }