cssdrupalfirefoxjqueryplanetdrupalDevelopment

Firefox -moz-border-radius doesn’t work on images unfortunately. Using -webkit-border-radius however works well on images in Safari and Chrome etc.

A recent customer wanted images on there site to have rounded corners. They where ok with it not working in Internet Explorer 8 and older but really wanted a fix for Firefox. Here follows one solution with jQuery I hacked together. It seems to work ok.

The site runs Drupal and the images are displayed in a views block. A simplified version of the HTML looks like this.

&lt;div id="block-views-example-block_1" class="block block-views"&gt;<br>&nbsp; &lt;div class="content"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;img src="http://example.com/sites/default/files/imagecache/example_preset/example.jpg" class="imagecache" width="200" height="200"&gt;<br>&nbsp; &lt;/div&gt;<br>&lt;/div&gt;

I started out with adding the following CSS rules.

#block-views-example-block_1 img {<br>&nbsp; border-radius: 7px;<br>&nbsp; -webkit-border-radius: 7px;<br>&nbsp; -moz-border-radius: 7px;<br>}

This made the corners round and nice in Safari but not in Firefox.

I found out that -moz-border-radius will work on CSS background images. My solution is therefor to move the image from the img tag to a background image on the parent div and setting the width and height of the div to the image size. Below is the jQuery script I came up with.

(function ($) {<br><br>// Make border radius work on images in Firefox.<br>Drupal.behaviors.initFirefoxBackgroundImage = function (context) {<br>&nbsp; if ($.browser.mozilla) {<br>&nbsp;&nbsp;&nbsp; $('#block-views-example-block_1 img', context).filter(':not(.initFirefoxBackgroundImage-processed)').addClass('initFirefoxBackgroundImage-processed').each(function () {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var imageUrl = $(this).attr('src');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var imageWidth = $(this).attr('width');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var imageHeight = $(this).attr('height');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(this).parent().addClass('firefox-radius').css({'background-image' : 'url(' + imageUrl + ')', 'width' : imageWidth, 'height' : imageHeight});<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(this).hide();<br>&nbsp;&nbsp;&nbsp; });<br>&nbsp; }<br>}<br><br>})(jQuery);

As a last step I added the new “firefox-radius” class to the CSS rules.

#block-views-example-block_1 img,<br>.firefox-radius {<br>&nbsp; border-radius: 7px;<br>&nbsp; -webkit-border-radius: 7px;<br>&nbsp; -moz-border-radius: 7px;<br>}

Not the prettiest solution but it works, it doesn’t mess up things for other browsers and it made the customer happy.