CSS – How to make inverted border-bottom with curved edges?

May 18, 2022

I’ve been looking everywhere and couldn’t find this exact example:

I managed to do this, but as you can see, it’s not inverted and not curved:

.outer {
  overflow: hidden;
}
.inner {
  border-bottom: 1px solid #888;

}
.inner i {
  width: 40px;
  height: 40px;
  border: 1px solid #888;
  border-radius: 150%;
  background-color: #fff;
}
.inner .top {
  margin-top: -20px;
}
.inner .bottom {
  margin-top: -20px;
  margin-bottom: -22px;
}
.inner .left {
  float: left;
  margin-left: -20px;
}
.inner .right {
  float: right;
  margin-right: -20px;
}
.content {
  min-height: 10px;
}

<div class="outer">
  <div class="inner">
    <div class="content"></div>
    <i class="bottom right"></i>
    <i class="bottom left"></i>
  </div>
</div>

Is that possible? I want it to as short as possible (height), like the image – and also I don’t want to use an image or SVG (I tried that and it looks weird) I want to use this with dynamic width.

>Solution :

You need to make use of border-top instead of border-bottom

.border-curve {
  width: 20em;
  height: 10em;
  background: transparent;
  border-top: 1px solid hsl(180deg 100% 52%);
  border-radius: 0.35em;
}

body {
  background: gray;
}