css - 円の上に複数の下部のみの境界線を取得する方法

Question

いくつかのコンテンツを含む 2 つの div があります。1つの「箱」と1つの「円」を、1つの図形のように見せたい. 中央下部に丸で囲った部分がある箱のようなもの。言葉で説明するのは難しいですが、コードを表示する方がはるかに優れていると思います。

マークアップ:

<div class="box">content</div>
<div class="circle">content</div>

CSS:

.box {
    width: 500px;
    height: 700px;
    margin: 0 auto;
    background: green;
    border: 1px solid blue;
}

.circle {
    width: 100px;
    height: 100px;
    margin: -50px auto 0 auto;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 10px green,
                            0 0 0 11px blue;
}

次に、円の境界線 (影) の上部を切り取りたいと思います。誰でもこれを行う方法を知っていますか? おそらく、これを行う別の（より良い）方法もありますか？

どうもありがとう