Custom Border

[m0ngr31]

So I’m trying to create a custom border where I can have curly braces around a block of text without using images. Is that even possible? I’ve been looking all over google, but I haven’t had any luck.

[Maikel]

http://jsfiddle.net/39yYu/

Like that…?

[Paulie_D]

@Maikel Not quite. That works for a single line sentence but not for multiple lines or paragraphs.

What I am assuming the OP requires is a single brace on either side that scales to the size of the paragraph block and encompasses all the text.

I think you could so something with ‘border-image’ but if the OP doesn’t want to use images I can’t see this working without a lot of extra mark-up &/or javascript.

Of course, if my assumption is wrong….

[Paulie_D]

Yep….border-image is the way to go: http://jsfiddle.net/Paulie_D/QPDUM/2/

[m0ngr31]

Hey, that’s exactly what I’m looking for! Did you make that image of those brackets? If you would it be possible to make a bigger one (like a height of 500px)?

[Paulie_D]

You can make the image any size you want….you just adjust the css accordingly.

The downside is, of course, that the larger the image the more download weight it adds to your site.

Plus, remember that border-image will not work in IE. http://caniuse.com/#search=border-image

[Author]

Posts