모양/이미지에 테두리 반경 넣기

Question

이것을 수행하고 싶습니다. 나는 경계 반경이 이것을 달성 할 수 없기 때문에 무엇을 해야할지 모른다. 상단의 곡선은 이미지이고 아래의 곡선은 단색입니다. 보시다시피 양쪽 가장자리는 여전히 날카 롭습니다. 그것은 가질 수 있습니다 : 전에 또는 :하지만 그나마 어떻게 모양을 알아.

Answer 1

당신은 모든 상자에 대한받은 위치를 추가, 그래서 모든 사람에 대한 margon을 변경해야합니다.

Answer 2

시도는이 같은 변화와 래퍼 블록을 추가 :

.wrap { 
    overflow: hidden; 
    width: 990px; 
} 

.box1 { 
    width:990px; 
    height:300px; 
    margin:0 auto; 
    background: url('https://s9.postimg.org/vq8kj53an/Selection_025.png'); 
    border-radius: 0 0 40% 40%; 
    transform: scalex(1.3); 
} 

HTML :

<div class="wrap"> 
    <div class="box1"></div> 
</div> 

<div class="box2"></div> 
<div class="box3"></div> 

https://jsfiddle.net/xbmbgLcc/