クリップ画像の背景/丸みのあるコーナーCSSのみ

Question

ウェブサイトのデザインには1つの要素がありますが、実装方法がわかりません。

これはページの一部です。コンテンツはガイドライン（ブートストラップグリッド）に従って表示されます。 そして、最も重要な部分は、下部と上部に丸みを帯びた境界線です。

私はborderプロパティと遊ぶことを試みたが、所望の結果を得ることができませんでした。

CSS、のみを使用して効果を達成する方法はありますか？クリップ、キャンバスなどの最新のブラウザ機能を使用せずに...、モバイルブラウザをサポートします。
または、既に適切な図形の背景をグラフィックエディタから書き出す方法はありますか？

私は何か助けに感謝します。

Answer 1

これは私が得ることができる最も近い：

div { 
 
    position:absolute; 
 
    left:40px; 
 
    top:40px; 
 
    width:500px; 
 
    height:300px; 
 
    border-radius:100%/20px; 
 
    background: blue url(https://placeimg.com/500/300/any); 
 
}

<div></div>