0

I want to Add the half circle at the bottom of the myStyle class.Following is the code which gives me the outer border for the top of the class but i also need inner circle at the bottom . I think negative border is the concept we can use, but not sure how to use it.

Expected Result should be Like the following image:

enter image description here

But right now i am getting result like following:

enter image description here

{ 

<style>
    #myStyle {
        width: 88px; 
        height: 106px; 
        background: yellow;
        border-top-left-radius: 140px 150%;
        border-top-right-radius: 165px 147%;
    }

</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">Ss</h5>
</div>
</body>

}

Swapnil Chidrawar
  • 73
  • 10

2 Answers2

1

You are right, it can be done with border properties. Check the snippet below.

#myStyle {
   position: relative;
   width: 88px; 
   height: 106px; 
   background: red;
   border-top-left-radius: 140px 150%;
   border-top-right-radius: 165px 147%;
}
#myStyle:after {
   position: absolute;
   bottom: 0;
   display: block;
   content: '';
   width: 88px;
   height: 44px;
   border-radius: 44px 44px 0 0;
   background: white;
}
<div id="myStyle"></div>
Mateusz Woźniak
  • 1,479
  • 1
  • 9
  • 10
0

Add a div below #myStyle that is the half circle and use this css on it

div{
     margin-top: -45px;
     height:45px;
     width:90px;
     border-radius: 90px 90px 0 0;
     background:white;
}
Christoffer Olsson
  • 93
  • 7