How to achieve the rounded corner effect through the background:
<HTML>
<Head>
<Title> CSS rounded corner effect </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Style type = "text/CSS">
Div. roundedcorner {Background: # 9bd1fa}
B. rtop, B. rbottom {Display: Block;Background: # Fff}
B. rtop B, B. rbottom B {Display: Block;Height: 1px;Overflow:
Hidden;Background: # 9bd1fa}
B. R1 {Margin: 0 5px}
B. R2 {Margin: 0 3px}
B. R3 {Margin: 0 2px}
B. rtop B. R4, B. rbottom B. R4 {Margin: 0 1px;Height: 2px}
</Style>
</Head>
<Body>
<Div class = "roundedcorner">
<B class = "rtop"> <B class = "R1"> </B> <B class = "R2"> </B> <B class = "R3"> </B> <B class = "r4"> </B>
<P align = "center"> corner box without images </P>
<P> & nbsp; </P>
<B class = "rbottom"> <B class = "r4"> </B> <B class = "R3"> </B> <B class = "R2"> </B> <B class = "R1"> </B>
</Div>
</Body>
</Html>
Demo address: http://www.aspor.cn/upfile/css-table-1.html
Implement the border circle Effect
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> CSS rounded border </title>
<Style type = "text/CSS">
# Xsnapshoth1, # xsnapshoth2, # xsnapshotp {margin: 0 10px; letter-Spacing: 1px ;}
# Xsnathh1 {font-size: 2.5em; color: # FFF ;}
# 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: # FFF; border-left: 1px solid # 08c; border-Right: 1px solid # 08c ;}
. Xb1 {margin: 0 5px; Background: # 08c ;}
. XB2 {margin: 0 3px; border-width: 0 2px ;}
. Xb3 {margin: 0 2px ;}
. Xb4 {Height: 2px; margin: 0 1px ;}
. Xboxcontent {display: block; Background: # FFF; Border: 0 solid # 08c; border-width: 0 1px ;}
</Style>
</Head>
<Body>
<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">
<P> finally, this effect is achieved. </P>
<P> are you happy? </P>
</Div>
<B class = "xbottom"> <B class = "xb4"> </B> <B class = "xb3"> </B> <B class = "XB2"> </B> <B class = "xb1"> </B>
</Div>
</Body>
</Html>
Demo address: http://www.aspor.cn/upfile/css-table-2.html
More information written in my blog, http://www.aspor.cn