How do I only show half of my div?

Question

I've got a button with 100px height, 100px width and a border radius of 100px . This makes a 360 degree circle, but I only want to hide half of it. I've searched for everything but I can't find it. Does anyone know how to do this?

Thanks!

Answer 1

Make a parent div, add overflow: hidden; and position: relative; to it. In the child div, do position: relative; and top: -50px;

Answer 2

By "hide half of it", what do you mean?

Do you want a semicircle?

width:100px;
height:50px;
border-radius:50px 50px 0 0;

Or something else? Please elaborate further and I can provide more options ;)

Answer 3

You can put it in another div with height: 50px and overflow:hidden . That should do the trick.