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.