Perfect CSS image-free rounded border effect [effects] [compatible with various browsers]

This method is compatible with various browsers. The effect is as follows:

Code:

<Style type = "text/CSS">
# Xsnapshoth1, # xsnapshoth2, # xsnapshotp {margin: 0 10px; letter-Spacing: 1px ;}
# Xsnathh1 {font-size: 2.5em; color: # 8a8a8a ;}
# Xsnathh2 {font-size: 2em; color: # 06a; Border: 0 ;}
# Xsnathp {padding-bottom: 0.5em ;}
# Xsnathh2 {padding-top: 0.5em ;}
# Xsnath{ Background: transparent; margin: 1em ;}
. Xtop,. xbottom {display: block; Background: transparent; font-size: 1px ;}
. Xb1,. XB2,. xb3,. xb4 {display: block; overflow: hidden ;}
. Xb1,. XB2,. xb3 {Height: 1px ;}
. XB2,. xb3,. xb4 {Background: # ffffff; border-left: 1px solid # bcbcbc; border-Right: 1px solid # bcbcbc ;}
. Xb1 {margin: 0 5px; Background: # bcbcbc ;}
. XB2 {margin: 0 3px; border-width: 0 2px ;}
. Xb3 {margin: 0 2px ;}
. Xb4 {Height: 2px; margin: 0 1px ;}
. Xboxcontent {display: block; Background: # ffffff; Border: 0 solid # bcbcbc; border-width: 0 1px ;}
</Style>

<Div id = "xsnax">
<B class = "xtop"> <B class = "xb1"> </B> <B class = "XB2"> </B> <B class = "xb3"> </B> <B class = "xb4"> </B>

<Div class = "xboxcontent">

<H1> Title 1 <P> content 1 <br/> content 1 content 1 content 1 </P>

<H2> Title 2 </H2>
<P> content 2 content 2 </P>
<P> content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2
Content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 </P>

</Div>

<B class = "xbottom"> <B class = "xb4"> </B> <B class = "xb3"> </B> <B class = "XB2"> </B> <B class = "xb1"> </B>
</Div>