Android browser renders borders wrong when there's a border radius smaller than the overall border width

It's a problem of the android browser, it draws the rounded corner and if the border-width is higher than the radius the area of the radius it's no filled.

neither with a border widht smaller than the radius the browser don't draw it well (you can see in http://jsbin.com/uxawuf/1 )

I don't see any related issue at the bug tracker of android, there's one about using the border radius to make shadows that I think it's the same problem , maybe it's a good idea open one (i'm on it :P)

I know this will not count as an good answer :P but If you want this effect you can add 2 divs, one for the border top and other for the border bottom, and do the trick with radius and background: ( here the example: http://jsbin.com/exexol/9 )

<body class=single>
  <div class=dialog-bound>
    <div class="bordertop"></div>
    <div class="content">Hello World</div>
    <div class="borderbottom"></div>
  </div>
</body>

and the css:

body.single {
  background-color: #336699;
  font-size: 16px;
}

body.single .dialog-bound{
  margin: 50px auto;
  max-width: 32em;
  background: transparent;
}
body.single .dialog-bound .content{
  padding: 0 5px 2px 5px;
  background-color: #FFFCF2;

}
body.single .dialog-bound .bordertop{
  border-radius: 10px 10px 0px 0px;
  background:#89BAE2;
  height:28px;
  -webkit-border-radius: 10px 10px 0 0;
}
body.single .dialog-bound .borderbottom{
  border-radius: 0 0 5px 5px;
  background:#89BAE2;
  height:8px;
  -webkit-border-radius: 0 0 5px 5px;
}

My tests are in a galaxy Nexus fully updated.

Tags:

Html

Css

Android

Recent Posts