CODEWITHSUNDEEP
cssbordergradientcss-shapes
Bas
Bas

Reputation: 1

CSS U shaped or curved borders

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:

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

Upvotes: 0

Views: 4712

Answers (4)

Aliang Jade Kie
Aliang Jade Kie

Reputation: 21

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>

Upvotes: 1

Bas
Bas

Reputation: 1

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!

Upvotes: 0

user3423014
user3423014

Reputation:

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

Upvotes: 3

meniltiac
meniltiac

Reputation: 91

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

Upvotes: 0

Related Questions