CSS U shaped or curved borders - css

Question

I've got a problem regarding CSS(3) borders.
I'm trying to transform an input text field giving it U shaped borders. The left and right borders should have 50% of the height.
This means that the top-left, top-right and top borders should be transparent.
The hard part are the following requirements:
It shouldn't be solved with overlapping elements to mask the top part (so additional elements and pseudo elements like :before and :after aren't a solution
It should be in pure CSS (no JavaScript libraries)
The hight should be 50% of the height
I tried to solve it with a combination of border-image and linear gradients, without success
Does someone has a solution for this problem?
Thanks!
P.s. Sorry for not posting example images, but Stackoverflow wouldn't let me...

Answer 1

this is something that look like a U, with pure css only
DEMO
div{
height:100px;
width:100px;
border:1px solid black;
border-top: 0px;
border-radius: 0px 0px 45px 45px;
}
that's what i understood from your question, if it's not what you want enlighten me more

Answer 2

maybe these is what you need
more percent in radius it will be more bigger circle
depend what you prefer
div{
height:90%;
width:90%;
border:1px solid black;
border-top: 0px;
padding:2% 8% 20% 8%;
border-radius: 0px 0px 50% 50%;
}
<div>The Roman and Han empires saw an exchange of trade goods, information, and occasional travelers, as did the later Eastern Roman Empire and various Chinese dynasties. These empires inched progressively closer in the course of the Roman expansion into the ancient Near East and simultaneous Han Chinese military incursions into Central Asia. Mutual awareness remained low and firm knowledge about each other was limited. Only a few attempts at direct contact are known from records. Several alleged Roman emissaries to China were recorded by ancient Chinese historians. The indirect exchange of goods along the Silk Road and sea routes included Chinese silk, Roman glassware (example pictured) and high-quality cloth. Roman coins minted since the 1st century AD have been found in China. A coin of Maximian and medallions from the reigns of Antoninus Pius and Marcus Aurelius were found in Vietnam. Roman glasswares and silverwares have been discovered at Chinese archaeological sites dated to the Han period. Roman coins and glass beads have also been found in Japan.</div>

Answer 3

You can use border-bottom-left-radius: 50%; and border-bottom-right-radius: 50%; on a div to create a u-shape.
An example:
HTML
<div class="u-shape"></div>
CSS
.u-shape {
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
height: 300px;
width: 50px;
}
And if you want to add a border to it to create the U shape, just give borders to the right, left, and bottom sides, like so:
CSS
.u-shape {
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}

Answer 4

Whoops sorry guys,
A simple
border-bottom: 1px solid black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
already did the trick when having your left, right and top borders transparent.
Still, thanks for the quick response!