Invert Rounded Corner

CSS Invert Rounded Corner

Buat efek rounded corner dengan CSS dimana warna solid berada di luar, sementara bagian tengah harus tetap transparan:

<div id="outer">
    <div>
        ....
    </div>
</div>

#outer {
  width:300px;
  height:auto;
  overflow:hidden;
  margin:20px auto 0px;    
}

#outer div {
  width:100%;
  height:250px;
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  border-radius:100px;
  -webkit-box-shadow:0px 0px 0px 100px #39f;
  -moz-box-shadow:0px 0px 0px 100px #39f;  
  box-shadow:0px 0px 0px 100px #39f;    
}

Lihat Demo