Shallow Thoughts

because deep thoughts smack of effort

Aiding CSS3 Rounded Corner Images

Posted in Uncategorized by Bridget on August 25th, 2010

Tim Van Damme wrote a very helpful tip for adding CSS3 rounded corners on images. To get the rounded corner effect, Tim placed an additional element around the img tag — in this case a p tag. To that p tag, he applied an inline style to set the background-image to be the same as the image being displayed on the page. Then he wrote some CSS3 magic using border-radius to round the corners. Not every image you come across will need this solution, but if you read what he wrote first, you might see why this strategy would come in handy.

The issue that arises for me comes when handing the site off to a client who will be adding images later. Depending on their skill level, they may or may not be savvy enough to add markup around an image to make this effect work. So, I’ve opted to add that element automagically using jQuery. All the caveats that go along with other javascript solutions apply here.

In my scenario, there is already a div with class=”figure” containing the image that is to have its corners rounded along with some additional text. In fact there are multiple div‘s with class=”figure” on the page. So, this snippet of jQuery finds the images inside each of those divs and applies the additional markup to them:

$(document).ready(function() {

// find images inside the divs with the class of 
// "figure" - and for each of them do some stuff 
  $('.figure img').each(function() {

// store the src attribute for the img because we
// need it in the next bit
  var imgSrc = $(this).attr('src');

// wrap the image in a p tag and use the src 
// attribute we stored earlier in the inline style 
// on the p tag
  $(this).wrap('<p style="background-image:url(' 
  +imgSrc+ ');"/>');

That’s all there is to it. Now each of the images will have the p tag with the inline style added to them, in order to make use of Tim’s delightful solution.