bracket style border around elements - html

Question

I'm looking for a way to implement a bracket style border around my <h2> headings; I've attached an image showing exactly what I'm trying to accomplish.
The only way I can think of to achieve this effect is by using images, but I'm unsure of exactly how to do so(all of my <h2>s are of varying length/height, or if maybe there is a better way.
Any tips & insight are greatly appreciated.
**I hate to resurrect this, but what can I look towards as being the solution to the problem shown int he updated image? The right line is too far right, as well as some opacity issues above and below the text..
UPDATE:

Answer 1

Working jsFiddle example.
Use the following. You just need to change the font of the text or replace it for an image, and maybe change the color of the borders to match yours.
For the HTML:
<div id="h2pre"></div>
<h2>
<div id="h2inpre"></div>
<div id="h2cont">Ready for the event of a lifetime?<br/>
We'd love to hear from you.
</div>
<div id="h2inpos"></div>
</h2>​
For the CSS:
h2{
text-align:center;
position:relative;
margin-left:50%;
left:-150px
}
div{ float:left; }
#h2inpre, #h2inpos{
background-color:#fff;
height:50px;
width:20px;
border-bottom:1px solid #FFA500;
border-top:1px solid #FFA500;
}
#h2inpre{
border-left:1px solid #FFA500;
}
#h2inpos{
border-right:1px solid #FFA500;
clear:right;
}
#h2cont{
font-family:"Arial",sans-serif;
padding:5px;
background-color:#fff;
}
#h2pre{
height:1px;
width:100%;
background-color:#FFA500;
margin-top:25px;
position:absolute;
float:none;
}
​

Answer 2

html:
<h2 class="bracket"><span class="text">Ready for the event of a lifetime?<br>We'd love to hear from you.</span></h2>
css:
.bracket {
position: relative;
text-align: center;
color: #999;
font-size: 1.2em;
}
.bracket:before {/* vertical stripe */
content: " ";
border-top: solid 1px orange;
position: absolute;
bottom: 50%;
left: 0;
right: 0;
}
.bracket .text {
position: relative;
display: inline-block;
background: #fff;
padding: .2em 1em;
max-width: 80%;/* force that at least some of vertical stripe is still shown */
}
.bracket .text:before {/*left bracket*/
content: " ";
border: solid 1px orange;
border-right: 0px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: .4em;
right: 0;
}
.bracket .text:after {/*right bracket*/
content: " ";
border: solid 1px orange;
border-left: 0px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: .4em;
right: 0;
}
demo: http://jsbin.com/ibiyal/2
You'll probably have to tinker with the padding of the text block, and the width of the left and right bracket.
Only downside is that it only works on a solid background.

Answer 3

It is perfectly possible. Take a look: http://tinkerbin.com/zQ1VWLLi
The HTML...
<h2 class="box">
<span>Ready for the event of a lifetime? <br/> We'd love to hear from you.</span>
</h2>
The CSS...
h2:before,
h2 span:before,
h2 span:after {
content: "";
position: absolute;
}
h2 {
position: relative;
font: 16px/1.2em cambria;
text-align: center;
}
h2:before {
top: 50%;
height: 1px; width: 100%;
background-color: orange;
}
h2 span {
display: block;
width: 50%;
padding: 7px;
margin: 0 auto;
position: relative;
background: /*same as background where it sits*/;
border: 1px solid orange;
}
h2 span:before,
h2 span:after {
left: 7%; right: 7%;
height: 1px;
background: /*same as background where it sits*/;
}
h2 span:before {
top: -1px;
}
h2 span:after {
bottom: -1px
}

Answer 4

You could do this with HTML and CSS.
CSS
#container {
position: relative;
height: 43px;
}
#bracks {
background-color: #fff;
margin:0 auto;
border: 1px solid black;
width: 200px;
height: 40px;
position: relative;
}
#text {
background-color: #fff;
position: absolute;
width: 150;
left: 15;
height: 22px;
top: -1;
padding: 10px;
text-align: center;
}
#strike {
position: absolute;
top: 21;
width: 100%;
border-top: 1px solid black;
}
HTML
<div id="container">
<div id="strike"> </div>
<div id="bracks">
<div id="text">Some text here.</div>
</div>
</div>