Complex (?) div border issue

[victorsvedberg]

I want to wrap a border around a div but I want the border top and bottom to just extend say 20% or a set px towards the middle and then stop.

Is this possible with CSS3 or do I require Java or something to make it happen? My goto solution is to set a bg top and bg bottom with the lines but it’s not very optimal for responsiveness. Or set a bg-color around the title and extend it over the div somehow to hide the lines, but everything feels hacky, would be cool to get it working with CSS.

And to get the idea: http://jsfiddle.net/victorsvedberg/4Q6fH/1/

Any ideas appreciated!

[Magpie]

Your explanation seems a bit vague to me. Do you really want a thick border or are you wanting a background for some content?

If the latter, you could either use a second layer of Divs or simply use a CSS gradient with color stops at 20% and 80% like this:

http://cdpn.io/yxbvE

[wolfcry911]

http://codepen.io/wolfcry911/pen/GyIlq

[victorsvedberg]

I think that did the trick wolfcry911, thank you!

[Author]

Posts