Handmade
CSS Design

Tutorial2: Safari support for rounded borders on an embedded image

14 Mar 2014

Image border for Safari

Welcome to Handmade CSS Design’s second tutorial, we hope you enjoy it and find it useful.

With more and more people making use of Safari on a PC, Mac, iPad or iPhone compatibility for this browser is all the more important.

Image of a white crownSo the designer in your team has asked you to add an embedded image (the one on the left here) into a paragraph so that it can be automatically updated via the client and their CMS. Cool, but we have a problem and it is called Safari, lets say we place it directly into a <p> tag with NO place for a div to wrap the image. Now lets say you need for this to be centered and then have rounded corners a background colour and a nice thick border.

So this is simple you might think, till you go to debug in Safari and find that your image is nice and round but it is missing the border.

Below I have written the code which solves this issue with an explanation to each part thereof…

HTML

<div class=”textc”>

<p><img src=”path/to/image.png” alt=”Image of a Crown” /></p>

</div>

CSS 3

Below we align our text to the center, as the image is in a paragraph this will be treated as text and be horizontally centered. We do this as we cannot know the size of the image as it can change

.textc { text-align:center; }

Below is a typical paragraph which will be set to 100% of the available width, add your padding or margin as you normally do.

p { width:100%; height:auto; padding:0%; margin:100%; }

Below we provide that nice blue background colour. Then and this is where the magic happens, instead of a border, we use the CSS3 property the box shadow and set all its values, the horizontal shift, vertical shift and spread to zero. We only apply a width to the size of the shadow, thereby producing a solid border around the image. Last but not least we give the image a border of 50% so that it will be converted into a circle.

p img { background-color:#0A66B3; -webkit-box-shadow:0px 0px 0px 6px #FFFFFF; box-shadow:0px 0px 0px 6px #FFFFFF; -webkit-border-radius:50%; border-radius:50%; }

NOTE: This will ONLY be supported by modern browsers IE9 and upwards. For backwards compatibility without the pretty rounded corners as they are not supported, you may add the following in the head of your site’s HTML…

What the code below is stating is that if the browser is IE8 or less then apply a solid white border of 6px to the image in the paragraph.

<!–[if lte IE 8]>

<style type=”text/css”>

p img { border:6px solid #FFFFFF; }

</style>
<![endif]–>

And there you have it , a border that works in Safari.

Leave your constructive comments, suggestions below and we will also gladly answer any questions you may have regarding the above.


Image of the back button

You may remain informed as to all of our latest news and events via the RSS 2.0 feed that you will find here!

top