Border not appearing continuous

Question

I am trying to make an arc using border-radius like this (in chrome)

#elem {
  border: 2px solid orange;
  border-bottom: none;

  width: 440px;
  height: 60px;
  border-top-right-radius: 220px 60px;
  border-top-left-radius: 222px 60px;
}

but the arc is not continuous. if i remove the border-bottom property (which makes the bottom border also visible) it became continous. Making bottom-border color to transparent also doesn't help.

e.g. http://jsfiddle.net/kFxec/9/

Not able to understand what is wrong here?

I am trying this for chrome only. works fine in firefox

Answer 1

you could instead fake border with box-shadow : http://jsfiddle.net/ZC2m2/

#elem {
  box-shadow:0 -2px 0  orange;
  width: 440px;
  height: 60px;
  border-top-right-radius: 220px 60px;
  border-top-left-radius: 222px 60px;
}

Answer 2

I would say that it is some kind of bug. Seems related to the bottom border. It disappears with this CSS

#elem {
  border: 2px solid orange;
  border-bottom: none;

  width: 440px;
  height: 60px;
  border-top-right-radius: 220px 60px;
  border-top-left-radius: 222px 60px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

What you see cutting the top border seems the bottom border doing strange things around. But giving it a moderate radius seems to somehow make it behave. (I don't know why)

fiddle