Zaokrąglona stopka, chowanie elementu za widoczne pole przeglądarki Opcje

[jakistyp]

Chciałbym osiągnąć taki efekt: http://postimg.org/image/cawr03tgh/

Próbowałem w ten sposób:

Kod

footer {
    background-color: #1f2e4a;
    width: 100%;
    height: 150px;
    border: 6px solid #488dab;
    border-radius: 75%;
    position: absolute;
}

Działałem na samej opcji w HTML <footer>

Oczywiście moim sposobem to wychodzi pół na pół. 50% obrazka w poziomie powinno być schowane za polem widzenia wtedy efekt wyszedłby bez problemu. Niestety pojawiają się suwaki, nie mogę tego elementy schować.

Prawdopodobnie albo źle kombinuje albo źle to rozpisałem.

[com]

http://jsfiddle.net/d1n8pnw4/ proszę baw się ale nie licz na super efekty, chyba że zabawa z svg ale to dla czegoś takiego mija się z celem myślę (IMG:style_emoticons/default/smile.gif)