Search code examples
htmlcssborder

How to create half circle corner effect on the div

I am trying to create a menu with a custom shape, but without much success. Can someone help me with figuring out the way to create this shape? I have already tried to make it with ::before tag but I was losing the shape as soon as the div would get resized.

enter image description here

Solution 

  • <style>
  .rounded {
    height: 400px;
    width: 300px;
    background-color: #bbb;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    display: inline-block;
  }
</style>
<div class="rounded"></div>

    Giving top and right border radius will handle it.