convex border-top and border-bottom with css?

Question

I am trying to have a border only for top and border with a line that is thick (4px) in the middle and at the ends goes to zero. Like in the pic

.hervorheben{
    line-height: 1.6em;
    margin-bottom: 1.6em;
    margin-top: 1.6em;
    text-rendering: optimizeLegibility;
    border-top: 1px solid #105322;
    border-bottom: 1px solid #105322;
    padding: 19px;
    margin: auto auto;
}

Do you know how to do so with only css?

Parth Jasani · Accepted Answer · 2016-05-03 13:42:10Z

2

You can`t make border like that but you can manage with Pseudo-element (after) like following

.your_class {
    position: relative
}

.your_class:after {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #000;
    border-radius: 100%;
    content: "";
    top: 0;
    left: 0;
}

Enjoy....

answered May 3, 2016 at 13:42

Parth Jasani

2,4591 gold badge22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krystian Over a year ago

Thanks that works :-) How can I get a line above and below a div with a bit margin? I tried this, but didnt worked for me. .hervorheben:before { position: relative; width: 80%; height: 4px; background: #105322; border-radius: 100%; content: ""; left: 10%; bottom: 0; } .hervorheben { position: relative; } .hervorheben:after { position: absolute; width: 80%; height: 4px; background: #105322; border-radius: 100%; content: ""; left: 10%; top: 0; }

Parth Jasani Over a year ago

you change top or bottom property with positive or negative value

Collectives™ on Stack Overflow

convex border-top and border-bottom with css?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related