• box-shadow over border

border with border-radius acting weird on mobile – using box-shadow instead

Ok so browsing some CSS and HTML blogs (I don’t remember which one it was or I would link to it) I found a really nice demo of how to display things inside a div and giving the div high radius resulting in a nice curvy box. I really liked what I saw and decided to try it out for myself and play around with it to achieve some cool effects (I didn’t have any in mind yet but the option to display images in a cool way). So I started playing around.

As a mobile entuhatist guy I wanted to check the result on my iPhone4 (iOS 5.1.1).. the result was not what I expected.. For some reason Safari and Chrome on my iPhone render the border differently than my MacBook Air.

So This is what i did:

<div id=’foo’><img src=’me.jpeg’ /></div>

#foo {
display: inline-block;
border: 5px solid #E6DB55;
width: 200px;
height: 200px;
overflow: hidden;
-moz-border-radius: 10px 190px 10px 190px;
-webkit-border-radius: 10px 190px 10px 190px;
border-radius: 10px 190px 10px 190px;
-khtml-border-radius: 10px 190px 10px 190px;

The following OUTPUT is taken from a Chrome 21.0.1180.57 on a Macbook Air.

Now going mobile!

I open the page on my iPhone Safari and this is what i see:

The image is overriding the border for some reason.. Now I thought maybe it will not happen on Chrome but look and behold:

I have no idea why this is happening but I will be happy to find out.

Luckily I have found a way around this (not the best solution but it works if this is the effect you are trying to achieve on mobile).

CSS3 box-shadow property  - This is a new property introduced to the world in CSS3 and its a very handy property (I will not get into the awesome things you can do with box-shadow beside what I will be showing now).

The box-shadow CSS synatx is as follows:

box-shadow: h-shadow v-shadow blur spread color inset;

now instead of using the normal border property to show the box border i’m going to us the shadow property to show a line of hard shadow around the box.

I just change the border property to

box-shadow: 0 0 0 5px #E6DB55;

and voila:

iPhone Safari Output:

You can watch this live here: – Border and Border Radius Mobile Test

Conclusion: If you need to use a cool radius on a mobile device and don’t need any CSS shadow use the box-shadow property inorder to create box borders.

For more information about Mobile Performance check out this slide Breaking The Mobile Web from @estellevw

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>