CSS U shaped or curved borders

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...

Sorry, my problem statement wasn't complete, I forgot to mention the 50% height of the left and right borders — Bas, Sep 20 '14 at 22:38

score 3 · Answer 1 · 2014-09-19T18:06:37.917

3

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

edited Sep 19 '14 at 18:06

answered Sep 19 '14 at 17:41

Sorry, my problem statement wasn't complete, I forgot to mention the 50% height of the left and right borders – Bas Sep 22 '14 at 07:27
this question has been posted too many times, [**Possible Duplicate**](http://stackoverflow.com/questions/8804417/css-border-where-only-half-of-a-border-is-visible), and [**Here**](http://stackoverflow.com/questions/8808099/css-set-border-to-half-width) it's impossible to stylize half of the border, unless you use an image, you can add a div element as a mask to hide the half of your border – Sep 22 '14 at 15:37
As described in the question: a mask/overlapping element wasn't a solution – Bas Sep 22 '14 at 19:36
that is impossible as far as i know – Sep 26 '14 at 19:34

score 1 · Answer 2 · answered Apr 18 '17 at 15:34

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>

score 0 · Answer 3 · answered Sep 19 '14 at 17:41

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;
}

Sorry, my problem statement wasn't complete, I forgot to mention the 50% height of the left and right borders — Bas, Sep 22 '14 at 07:28

score 0 · Answer 4 · answered Sep 22 '14 at 07:45

0

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!

answered Sep 22 '14 at 07:45

Bas

1
1
2

CSS U shaped or curved borders

4 Answers4