I bloggen hittar du nyheter från Plucera Webbyrå

IMG border-radius workaround

16 december 2009

Med lite hjälp av jQuery kommer här en lösning på problemet att lägga border-radius på bilder. Lösningen involverar att konvertera img-taggen till en div med samma bild som bakgrundsbild istället. Fungerar alltså inte i Internet Explorer just nu.

XHTML

<body>
<img src="vinter.jpg" class="bild" />
</body>

JS

<script type="text/javascript">
    $(document).ready(function() {
        $(".bild").each(function(){
            var div = "<div class="bild" style="background-image:"+
                      "url('"+ this.src + "'); width: "+ this.width +"px; "+
                      "height: "+ this.height +"px;">";
            $(this).replaceWith(div);
        });
    });
</script>

CSS

<style type="text/css">
    DIV.bild, IMG.bild { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
</style>

Slit det med hälsan!