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:

<span>£1</span><img src="food.png" style="width:200px; height:200px" />

Then I added the CSS for the page:

<style> body{ background-color:#000; font-family:arial; } span { color:#fff; vertical-align:middle; font-size: 280px; } img { border-radius:105px; border: 10px solid #fff; vertical-align:middle; } </style>

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:

-moz-border-radius : 105px;

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.

<style> body{ background-color:#000; font-family:arial; } span { color:#fff; vertical-align:middle; font-size: 280px; float:left; } div { background-image:url("food.png"); border-radius:105px; border: 10px solid #fff; -moz-border-radius : 105px; vertical-align:middle; float:left; } </style>
<span>£1</span><div style="width:200px; height:200px" />

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.

Comments (3)

  1. Craig says:

    The real question is which one is correct according to the CSS3 spec.

  2. thebeebs says:

    Hi Craig... Good question: The IE9 implimentation is the correct one. Border-radius should be applied to all elements except table in the same way. All border styles (‘solid’, ‘dotted’, ‘inset’, etc.) follow the curve of the border.

    Or at least that my understanding from the spec:

    See 4.4.1. Corner Shaping at http://www.w3.org/.../css3-background

  3. Ken says:

    What version of browsers were you testing?

    I tested Firefox 4 beta 8, and it worked.

    Chrome v7 failed as you tested, but there is v8, v9, even v10 out there.

Skip to main content