how to create a curve in the middle of a div border in css?

Question

I'm trying to create curve in the middle of a div border like this But I don't know how:

<div class="container"></div>

<style>
  .container{
    width:100%;
    height: 300px;
    border: 1px solid orange;
  }
</style>

Answer 1

you can use pseudo elements

no need for another element

border also with pseudo element, to be able to hide the line

.container{
  width:100%;
  height: 300px;
  
  overflow: hidden; /* half circle - top is not visible */
  position: relative;
}
.container::before{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  border: 1px solid orange;
}
.container::after{
  content: "";
  position: absolute;

  /* size */
  width: 200px;
  height: 200px;
  
  /* center horizontaly */
  left: 50%;
  margin-left: -100px;
  
  /* place verticaly */
  top: -100px;
    
  border-radius: 50%; /* circle magic */
  
  border: 1px solid orange;
  background-color: white;
}

<div class="container"></div>

Answer 2

You'll need a second element with settings similar to the snippet below.

Important details:

• The border radiuses

• The relative/absolute position combination of both elements, with the half-circle (absolute position) being the child of the rectangle

• The left and transform settings of the half-circle for the horizontal position in the center

• The top: -1px setting for the half-circle for the vertical position and to cover the border of the rectangle and the white background to really cover it.

• and everything else ;-)

.container {
  width: 100%;
  height: 300px;
  border: 1px solid orange;
  position: relative;
}

.half-circle {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  border-bottom: 1px solid orange;
  border-left: 1px solid orange;
  border-right: 1px solid orange;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  background: #fff;
}

<div class="container">
  <div class="half-circle"></div>
</div>