CSS Make a div curved at top and bottom but straight at the left and right sides

Question

Hey guys I've been wondering if it was possible to do this, I've tried with border-radius but it only makes curves to the left and right sides apparently...

Here's what I need:

This would be the working div:

#mainbox {
  width: 115px;
  height: 24px;
  background-color: gray;
  border: 1px solid #000000;
  text-align: center;
}

<div id="mainbox">
  <div id="secondbox">test</div>
</div>

Any possible ideas?

Answer 1

A few possible ideas:

• You can try using border-top-left-radius: 30%; border-top-right-radius: 30%;. The problems with this are twofold: You'll see that it does end up curving the corners too when the percentages get higher (which isn't what you want), and it also doesn't support inverted, so you won't be able to use it for the bottom of the div.
• Or, you can mess around with the clip-path property, like this: clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); This article https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms talks about how he uses that css property to make slanted divs.
• Take a look at the methods presented in Invert rounded corner in CSS?. The point there was to try to make an inverted rounded corner, and a lot of the solutions presented pretty creative ways to manipulate the borders of a div.

I know this isn't a complete answer, but I hope it helps anyways :)

Answer 2

Something like this can be achieved but it's troublesome. SVG will be better for this.

Referenced from this question on SO.

body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mainbox {
  width: 200px;
  height: 130px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#mainbox::before,
#mainbox::after {
  content: "";
  display: block;
  position: absolute;
  height: 100px;
  /* equal to inner curvedbox */
  border-left: 5px solid black;
  bottom: 0;
  z-index: 1;
}

#mainbox::before {
  left: 0;
}

#mainbox::after {
  right: 0;
}

#curvedbox {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#curvedbox::before,
#curvedbox::after {
  display: block;
  content: "";
  width: 140%;
  height: 200%;
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#curvedbox::before {
  top: -30%;
}

#curvedbox::after {
  top: 69%;
}

#secondbox {
  transform: translateY(-140%);
}

<div id="mainbox">
  <div id="curvedbox">
    <div id="secondbox">test</div>
  </div>
</div>