Problem polega na tym, że współczesne przeglądarki internetowe same z siebie nie chcą poprawnie wyświetlać zaokrągleń, a jeśli dodatkowo zadamy jakieś parametry, to możemy być pewni, że nie będzie to wyglądało tak, jak byśmy sobie tego życzyli.

Webkit wyświetla zaokrąglenia, ale nie nadaje już zaokrąglanym obiektom cienia wewnętrznego (inner shadow). W Firefoksie border-radius nie wyświetla się wcale.

Z pomocą przychodzi prosta sztuczka: owijamy element z obrazkiem tagiem <span>. Oryginalny obrazek ustawiamy jako tło. Aby schować obrazek ustawiamy parametr opacity na 0 (lub display:none).

Pierwszy sposób (opacity) pozostawi grafikę jako możliwą do skopiowania lub pobrania.

<span style="background:url(/image.jpg) no-repeat">
  <img src="/image.jpg" border="0" />
</span>

Aby ułatwić sobie codzienną pracę, możemy użyć jQuery do automatycznego owijania grafiki w znacznik <span>.

Poniższy kod jQuery odnajdzie elementy z ".rounded-img" lub ".rounded-img2" i doprawi im właśnie tag <span>.

Skrypt odszukuje parametry: src, width, height i atrybut klasy CSS oryginalnego obrazka i dodaje je w stylu 'inline' w tagu <span>. Następnie ustawia opacity obrazka na 0, aby go schować.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $(".rounded-img, .rounded-img2").load(function() {

 $(this).wrap(function(){

 return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';

 });

 $(this).css("opacity","0");

 });

});

</script>