CSS3 border-radius in the real world

I was walking through the high street yesterday and noticed a poster outside of M&S that was advertising a dine in for two, £10 promotion. The way that they had used a picture as the infill for the 0 in £10 made me think about how you could achieve that effect using CSS3.

M&S AdvertM&S Advert 2

So when I got home I booted up my editor and had a fiddle with the border-radius property that's supported in IE9, Chrome, Safari, FireFox and Opera.

From the picture I'd say they were using Helvetica as the font, but to keep things simple I've just used Arial.

Firstly I added the HTML I'll need which consists of some text wrapped in a span and on the right a 200px by 200px image of some food:

</!-->

Then I added the CSS for the page:

</!-->

To create the round image shape I added the CSS3 attribute border-radius and set it's value to 105 which is half the size of the width + border.

I also added a 10px white border so that it looks more like the original image.

I started up the browser and IE9 displayed roughly what I was expecting. However a number of the other browser failed to correctly apply the border.

Internet Explorer 9

 

Google Chrome

rounded the corners but did not display the white border that I specified.

Chrome Failed to render the border

Safari

pulled the same trick.

Safari failed to render the border

Firefox

Did not apply the rounded corners at all. This is because Firefox currently applies border radius with a vendor prefix.

 FireFox

To fix this you simply have to add the vendor specific code to the image in CSS:

</!-->

However, Firefox still didn't apply the border as I was expecting.

Firefox

Opera

The rendering in opera was similar:

Opera

 

It seemed that only IE9 Beta was rendering border-radius correctly, so I thought I'd change approach. This time I created a DIV and set it's background-image property to the food image and rounded the corners of the DIV.

 

This time all the browsers displayed the border-radius correctly, however I had now broken the vertical-alignment by using  a left floated div  rather than an image.

</!-->

</!-->

IE9

Internet Explorer 9

Opera

opera

 

Safari

Safari

Chrome

Chrome

FireFox

FireFox

 

I guess the lesson here is: Don't use CSS3 border-radius on elements other than DIV's if you want consistent rendering across all browsers.

Published by thebeebs

Martin works for Oracle as a Developer Evangelist. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code.