How to make bottom part Complete circle in css

Question

How do i make the bottom part to complete half circle

I have following code which gives proper shape :

<style>
     #myStyle {
        position: relative;
        width: 75px; 
        height: 113px; 
        background: #f5d540;
        border-top-left-radius: 183px 150%;
        border-top-right-radius: 201px 147%;
    }
    #myStyle:after {
        position: absolute;
        bottom: 0;
        display: block;
        content: '';
        width: 75px;
        height: 44px;
        border-radius: 44px 44px 0 0;
        background: white;
    }
</style>
<body ng-app="">
    <p> Insert Some text in the Text Field </p>
    <p> Enter The Text <input type="text" ng-model="name" placeholder="Enter the Name"> </p>
    <h1> Hi {{name}}</h1>
<div class="myStyle" id="myStyle">
    <h5 style="text-align:center;padding-top: 10px;">Energia</h5>
</div>
</body>

The answer for above code is as follows:

Now I am changing the code to reduce the width and height like follws:

#myStyle {
        position: relative;
        width: 60px; 
        height: 101px; 
        background: #f5d540;
        border-top-left-radius: 183px 150%;
        border-top-right-radius: 201px 147%;
    }
    #myStyle:after {
        position: absolute;
        bottom: 0;
        display: block;
        content: '';
        width: 75px;
        height: 44px;
        border-radius: 44px 44px 0 0;
        background: white;
    }

So now bottom part is not complete circle . Can anybody help me to sort out this as i am new in html css.

Have you tried adjusting the values next to the `border-top-*-radius`? — Heretic Monkey, Feb 13 '17 at 18:56
Posible duplicate of http://stackoverflow.com/questions/22421880/inverted-border-radius-possible — Facundo La Rocca, Feb 13 '17 at 19:00
The result of your first code block does not look like the screenshot to begin with. — Mr Lister, Feb 13 '17 at 19:25
I am sorry. I have updated my code. Can you please check it once as it is urgently needed. Thanks — Swapnil Chidrawar, Feb 13 '17 at 19:31

score 2 · Answer 1 · answered Feb 13 '17 at 19:34

#myStyle has width of 60px while #myStyle:after is 75px. Just make them the same.

<style>
  #myStyle {
    position: relative;
    width: 60px;
    height: 101px;
    background: #f5d540;
    border-top-left-radius: 183px 150%;
    border-top-right-radius: 201px 147%;
  }
  #myStyle:after {
    position: absolute;
    bottom: 0;
    display: block;
    content: '';
    width: 60px;
    height: 44px;
    border-radius: 44px 44px 0 0;
    background: white;
  }
</style>

<body ng-app="">
  <p>Insert Some text in the Text Field</p>
  <p>Enter The Text
    <input type="text" ng-model="name" placeholder="Enter the Name">
  </p>
  <h1> Hi {{name}}</h1>
  <div class="myStyle" id="myStyle">
    <h5 style="text-align:center;padding-top: 10px;">Energia</h5>
  </div>
</body>

thank you very much..it works for me . you are rock star – Swapnil Chidrawar Feb 13 '17 at 19:37 — Swapnil Chidrawar, Feb 13 '17 at 19:37
No worries, my friend, accept the answer when you can. – Serg Chernata Feb 13 '17 at 19:45 — Serg Chernata, Feb 13 '17 at 19:45

How to make bottom part Complete circle in css

1 Answers1