Border không xuất hiện liên tục

Question

Tôi đang cố gắng để làm một hồ quang sử dụng border-radius như thế này (trong 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; 
} 

nhưng arc là không liên tục. nếu tôi loại bỏ các thuộc tính dưới cùng biên giới (mà làm cho biên giới dưới cùng cũng có thể nhìn thấy) nó đã trở thành liên tục. Làm cho màu đường viền dưới cùng trong suốt cũng không giúp ích gì.

ví dụ: http://jsfiddle.net/kFxec/9/

Không thể hiểu điều gì sai ở đây?

Tôi đang thử tính năng này chỉ dành cho chrome. hoạt động tốt trong firefox

Answer 1

Tôi có thể nói rằng nó là một số loại lỗi. Dường như liên quan đến đường viền dưới cùng. Nó biến mất với CSS này

#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; 
} 

Những gì bạn thấy cắt đường viền phía trên có vẻ như đường viền phía dưới làm những điều kỳ lạ xung quanh. Nhưng cho nó một bán kính vừa phải dường như bằng cách nào đó làm cho nó hoạt động. (Tôi không biết tại sao)

fiddle

Answer 2

bạn có thể biên thay vì giả với hộp-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; 
}