CSS Border Issue on Google Chrome

I'm having trouble with different border colours and border-radius in css for my website.

I have created a box and added a border just to the top of the box as shown in the image below.

However, I wanted the top border to stretch the whole width of the box but the seems to be a problem. This problem only occurs with Google Chrome on pc, it seems fine on Safari and Internet Explorer.

#box {
    width:250px;
    height: 250px;
    background: #acacac;
    position: absolute;
    right:10px;
    top:315px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px开发者_Python百科;
    border-top: 45px solid white;
}

This is an issue with CSS borders and it's how you create the arrows that you see in some blogs. This is a limitation of how you can implement borders with rounded corners.