rounded border around img

This is what I want to achieve.

I want to make it as flexible as possible, so i split the png into left top corner, left, right top corner e开发者_运维知识库tc..

Here is what I have tried:

<div class="top">
<div class="lt">
    <div class="lr">
        <img src='somepicture.jpg' />
    </div>
</div>
</div>

.win{width:182px;}
.win .lt{background:url('../img/5.png') no-repeat left top;}
.win .lr{background:url('../img/7.png') no-repeat right top;}
.win .top{background:url('../img/6.png')  top;}
.win .l{background:url('../img/2.png') no-repeat left;}
.win .top,.win .lt, .win .lr{height:10px;padding:0;margin 0;overflow:hidden;}

.win .l doesn't fit to the height of the image.

Maybe my whole approach is wrong. What's the best practice for such a problem?

/* EDIT */

it looks this solution doesnt work for me:

as u can sse the border is missing from the corners. if i make it 4+ px thick then its ok but i need it 1px thin. why it is a problem?

the html

<div class="win" >  
<img class="rounded" src='red.jpg' />
</div>

and the css

.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;  
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
} 

You should consider using border-radius, which gives you rounded corners in all modern browsers:

.something{
   border-radius:4px;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
}

More info here: https://developer.mozilla.org/en/CSS/border-radius

You can use this tool to determine the size: http://border-radius.com/

NB: if you need support for IE<9, you can use http://css3pie.com/

Border radius really would be the nice way forward as it's simple and IE<9 just have to make do with a slightly less visually appealing site. Still, if you want to go with the corner image option see this:

http://jsfiddle.net/chricholson/JS5AG/

HTML:

<div>
    <img />
    <span class="tl"></span>
    <span class="tr"></span>
    <span class="bl"></span>
    <span class="br"></span>
</div>

CSS:

div {
    height: 100px;
    width: 100px;
    background: red;
    position: relative;
}

span {
    position: absolute;
    background: blue;
    height: 20px;
    width: 20px;
    display: block;
}

span.tl {
    top: 0; left: 0;
}
span.tr {
    top: 0; right: 0;
}
span.bl {
    bottom: 0; left: 0;
}
span.br {
    bottom: 0; right: 0;
}

There is a hack is for using border-radius in IE8 (and older) and its very fussy, First download this .htc solution: Curved Corner and upload it to your site. Then wherever you need a border radius, apply this CSS:

.rounded-corners {
    behavior: url(/css/border-radius.htc);
    border-radius: 20px;
}

Use it as a last resort.