| title | authors | intro | types | categories | published | updated | status | |||
|---|---|---|---|---|---|---|---|---|---|---|
CSS3 border-radius in the real world |
|
I was walking through the high street yesterday an... |
|
|
2011/01/17 12:00:00 |
2011/01/17 13:00:00 |
archived |
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.
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.
rounded the corners but did not display the white border that I specified.
pulled the same trick.
Did not apply the rounded corners at all. This is because Firefox currently applies border radius with a vendor prefix.
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.
The rendering in opera was similar:
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.
