長方形と円が重なっていない部分を消したい　※追記

CSSで画像のように、長方形と重ねっている部分だけ表示する円は作れますか？
オレンジの丸を長方形の右下に配置するところまではできたのですが、長方形の外にある部分も表示されてしまうため理想の形に実現できません
以下コードを記載しましたのでご教授よろしくお願いいたします。

html
1    <div class="sample1">
2        <h1>sample1</h1>
3        <div class="round3">
4        </div>
5    </div>
6```!
7
8
9```css
10.sample1{
11    margin:0 auto;
12    text-align: center;
13    position: relative;
14    margin-top:100px;
15    background-color:#666;
16    width:500px;
17}
18
19.sample1 h1{
20    padding:100px;
21    color:#fff;
22}
23
24.round3{
25    position: absolute;
26    bottom:-10px;
27    right: -10px;
28    width: 50px;
29    height: 50px;
30    border-radius: 50%;
31    background: orange;
32}

今はこんな感じになっています。

※追記
上記の問題は解決しましたが(sample1にhiddenを付け足す)
今度は同じ長方形で隠したい円と隠したくない円がある場合にどちらも
消えてしまいます。
理想は下の画像のような感じです
ご教授よろしくお願い致します。

行動規範の内容に同意します

回答1件

下記でどうでしょう。

css
1.sample1{
2    margin:0 auto;
3    text-align: center;
4    position: relative;
5    margin-top:100px;
6    background-color:#666;
7    width:500px;
8    overflow: hidden; /* 追加 */
9}