How to curve the div/li which is near to circle

Question

I have the following code. What I want to achieve is li:before circle part should have curve form so that is should get matched with circle. I tried this but not able to get how to do this. Help me this in this regards.

.test {
  list-style: none;
  margin: 0;
  padding: 0
}

.test li {
  float: left;
  margin: auto;
  width: 192px;
  height: 50px;
  border: 4px black double;
  text-align: center;
}

<div style="border:4px black double; height:200px;position:relative;background:url('')">
  <div class="myimage" style="width:200px; height:200px; position:absolute; top: 200;left: 0;right: 0;bottom: 0;margin: auto;border:8px gray double; border-radius:100px;background:url('') 200px; ">
  </div>
</div>
<div style="clear:both"></div>
<div style="border:1px green solid">
  <div style="border:1px red solid;float:left;width:602px;">
    <ul class="test">
      <li>1</li>
      <li>2</li>
      <li style="">3</li>
    </ul>
  </div>
  <div style="border:1px red solid;float:right;width:602px">
    <ul class="test">
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
  <div style="clear:both"></div>
</div>

Answer 1

You cannot create div shape like this in css, only you can fake it.

Method1:

#normal{
  /*box with normal border*/
  display: inline-block;
  width: calc(200px);
  height: calc(50px);
  border: 4px solid black;  
}
#curved{
  /*Faking the border*/
  display: inline-block;
  margin-top: 100px; 
  width: calc(200px + 4*0px);
  height: calc(50px + 4*0px);
  padding:4px; /* faking border space */
  border-width: 0;

  /*faking full border border*/
  background:
  radial-gradient(
    circle at 250px -50px,   /*center at 250,-50 from top left corner*/
    white,
    white calc(50*1.414px + 30px),  
    black calc(50*1.414px + 30px),
    black calc(53*1.414px + 30px),
    transparent calc(53*1.414px + 30px),
    transparent
    ), 
  /*faking straight lines*/
  linear-gradient(to bottom,black,black 4px,transparent 4px,transparent), /*top border*/
  linear-gradient(to left,black 4px,transparent 4px,transparent), /*right border*/
  linear-gradient(to top,black 4px,transparent 4px,transparent), /*bottom border*/
  linear-gradient(to right,black 4px,transparent 4px,transparent) /*left border*/
  ;

}

<div id="normal">1</div>
<div id="curved">2</div>

Image Explanation:

Everything outside the box is clipped, that is how gradient works. Different dimensions of ellipse or circles can be created. Radial gradient lies on top of other four fake borders.

Method2:

div{
  margin: 50px;
  position: relative;
  background-color: red;
  width: 200px;
  height: 50px;
  overflow: hidden;
}
div::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  box-sizing:border-box;
}
div::after{
  content: '';
  position: absolute;
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  top: -2px;
  left:200px;
  transform:translate(-50%,-50%);

  border: 2px solid black; 
}

<div></div>

Answer 2

What you are looking for is an inverse border kind of scenario where the border follows the outside shape of a circle.

I have put together a solution. Check it out.

EDIT: Added explanation
In order to achieve the result, you need to add a div inside the li/div whose borders you want curved.

Setting position: relative for the child div allows it to move around while also giving it a default z-index which puts it's visibility over it's parent. Since only the bottom part of the parent li/div is required to be curved, set the border-bottom-right-radius and border-bottom-left-radius of the child div to 100%. This will form a semi-circle thus effectively making your parent's lower border look curved. But right now, the li/div elements look like as if their bottom right/left borders are gone. To simulate these borders, just set the border-left/right property of the child div.

Also don't forget to add overflow: hidden in the container and apply the same background-colour to all of the elements involved because without the colour being set, the parts required to be hidden will be visible and the solution will not work.

Here's the code for the same.

ul {
  list-style: none;
  overflow: hidden;
  background-color: white;
}

li {
  float: left;
  border: 2px solid black;
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: white;
}

.right-circle {
  position: relative;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  width: 60px;
  height: 40px;
  background-color: white;
  border-left: 2px solid black;
  top: -22px;
  left: 90px;
}

.left-circle {
  position: relative;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  width: 60px;
  height: 40px;
  background-color: white;
  border-right: 2px solid black;
  top: -22px;
  left: -50px;
}

.empty {
  border: none;
  width: 50px;
}

<ul>
  <li>Element
    <div class="right-circle"></div>
  </li>

  <li class="empty"></li>
  <li>Element
    <div class="left-circle"></div>
  </li>
</ul>

Answer 3

You can just use border-radius with padding properties and some other tricks to achieve desired layout. Demo:

.test {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.test li {
  width: 192px;
  height: 50px;
  border: 4px black double;
  text-align: center;
}

.test li:nth-child(3) {
  padding-right: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.test li:nth-child(4) {
  padding-left: 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

<div style="border:4px black double; height:200px;position:relative;background:url('')">
  <div class="myimage" style="box-sizing: border-box; width:200px; height:200px; position:absolute; top: 200;left: 0;right: 0;bottom: 0;margin: auto;border:8px gray double; border-radius:100px;background:url('') 200px; ">
  </div>
</div>
<div style="border: 1px green solid">
  <div style="border:1px red solid;">
    <ul class="test">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</div>