Android Browser Rendering border radius incorrectly with larger border

Question

I'm running into a problem on the Android Webkit browser. This is happening on Android 4.0.3 and earlier. The design calls for a 15 pixel top border within a div and then rounded corners. I am using border-radius to accomplish this and this works fine in all modern browsers but on Android it looks like this:

The HTML looks like this:

<section class=" sub_nav" id="quick_access_section">
 <header>
    <h1>Headline</h1>
    </header>
    <div class="wrapper cw_humans">
        ....
        <div class="text">Nam condimentum viverra nulla sed pulvinar nisl posu</div>
        ....
        </div>
    </div>
</section>

The CSS looks like this:

section {
  background: #f2f4f7;
  border-top: 15px solid #1a293a;
  border-radius: 6px;
  -webkit-box-shadow: 0px 5px 10px #bfc4ca;
  -moz-box-shadow: 0px 5px 10px #bfc4ca;
  box-shadow: 0px 5px 10px #bfc4ca;
  margin: 0 auto;
  width: 80%;
}

On Chrome on Mac OS, Apple's Webkit, and Androi Chrome it looks like this:

I'm curious if anyone else has seen this before. I have used the webkit prefix which didn't have an effect, as I would have expected.

Coble

Answer 1

android's px may be different because the display is different, so using device independent measurements will help keep everything constant. Em's are an easy way to keep things constant as they are relative to the default font size, which is usually 16px. The default font-size can be modified though using css giving all browsers the same starting point.

Fremantle

Using em measurements for border radius on Android does not work at all. Measurements in px are interpreted as "virtual pixels" anyway, not device pixels. – Glossary