Copy codeThe Code is as follows:
<! 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> Baidu youah css rounded corner solution </title>
<Style>
. Box1 {background: url ('HTTP: // response) repeat-x #1d6cb7; margin-top: 1em; position: relative; zoom: 1; width: 778px ;}
. Box1. tl ,. box1. tr ,. box1. bl ,. box1. br {width: 5px; height: 5px; position: absolute; background: url ('HTTP: // www.jb51.net/upload/20090330140618989.gif') no-repeat; overflow: hidden ;}
. Box1. cc {height: 40px; padding: 5px ;}
. Box1. tl {left: 0; top: 0 ;}
. Box1. tr {right: 0; top: 0; background-position: 0-5px ;}
. Box1. bl {left: 0; bottom: 0; background-position: 0-10px ;}
. Box1. br {right: 0; bottom: 0; background-position: 0-15px ;}
. Box2 {border: 1px solid #84 cedd; margin-bottom:. 8em; position: relative; zoom: 1; width: 778px ;}
. Box2. tl ,. box2. tr ,. box2. bl ,. box2. br {width: 6px; height: 6px; position: absolute; background: url ('HTTP: // www.jb51.net/upload/20090330140618283.gif') no-repeat; overflow: hidden ;}
. Box2. cc {height: 40px; padding: 5px ;}
. Box2. tl {left:-1px; top:-1px ;}
. Box2. tr {right:-1px; top:-1px; background-position: 0-6px ;}
. Box2. bl {left:-1px; bottom:-1px; background-position: 0-12px ;}
. Box2. br {right:-1px; bottom:-1px; background-position: 0-18px ;}
. Box3 {position: relative; zoom: 1; padding: 1em 1.5em; margin:. 5em 0 1em 0; background: # f1f6de}
. Box3. tl ,. box3. tr ,. box3. bl ,. box3. br {width: 5px; height: 5px; position: absolute; background: url ('HTTP: // www.jb51.net/upload/20090330140618807.gif') no-repeat; overflow: hidden ;}
. Box3. cc {height: 40px; padding: 5px ;}
. Box3. tl {left: 0; top: 0 ;}
. Box3. tr {right: 0; top: 0; background-position: 0-5px ;}
. Box3. bl {left: 0; bottom: 0; _ bottom:-1px; background-position: 0-10px ;}
. Box3. br {right: 0; bottom: 0; _ bottom:-1px; background-position: 0-15px ;}
</Style>
</Head>
<Body>
<Div class = "box1">
<Span class = "tl"> </span> <span class = "tr"> </span>
<Div class = "cc">
<P> rounded corner 1 </p>
</Div>
<Span class = "bl"> </span> <span class = "br"> </span>
</Div>
<P> </p>
<Div class = "box2">
<Span class = "tl"> </span> <span class = "tr"> </span>
<Div class = "cc">
<P> corner 2 </p>
</Div>
<Span class = "bl"> </span> <span class = "br"> </span>
</Div>
<P> </p>
<Div class = "box3">
<Span class = "tl"> </span> <span class = "tr"> </span>
<Div class = "cc">
<P> rounded corner 3 </p>
</Div>
<Span class = "bl"> </span> <span class = "br"> </span>
</Div>
<Br/> for more code, visit <a href = "http://www.jb51.net/" target = "_ blank"> script house </a>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> css </title> <style>. box1 {background: url ('HTTP: // response) repeat-x #1d6cb7; margin-top: 1em; position: relative; zoom: 1; width: 778px ;}. box1. tl ,. box1. tr ,. box1. bl ,. box1. br {width: 5px; height: 5px; position: absolute; background: url ('HTTP: // www.jb51.net/upload/20090330140618989.gif') no-repeat; overflow: hidden ;}. box1. cc {height: 40px; padding: 5px ;}. box1. tl {left: 0; top: 0 ;}. box1. tr {right: 0; top: 0; background-position: 0-5px ;}. box1. bl {left: 0; bottom: 0; background-position: 0-10px ;}. box1. br {right: 0; bottom: 0; background-position: 0-15px ;}. box2 {border: 1px solid #84 cedd; margin-bottom :. 8em; position: relative; zoom: 1; width: 778px ;}. box2. tl ,. box2. tr ,. box2. bl ,. box2. br {width: 6px; height: 6px; position: absolute; background: url ('HTTP: // www.jb51.net/upload/20090330140618283.gif') no-repeat; overflow: hidden ;}. box2. cc {height: 40px; padding: 5px ;}. box2. tl {left:-1px; top:-1px ;}. box2. tr {right:-1px; top:-1px; background-position: 0-6px ;}. box2. bl {left:-1px; bottom:-1px; background-position: 0-12px ;}. box2. br {right:-1px; bottom:-1px; background-position: 0-18px ;}. box3 {position: relative; zoom: 1; padding: 1em 1.5em; margin :. 5em 0 1em 0; background: # f1f6de }. box3. tl ,. box3. tr ,. box3. bl ,. box3. br {width: 5px; height: 5px; position: absolute; background: url ('HTTP: // www.jb51.net/upload/20090330140618807.gif') no-repeat; overflow: hidden ;}. box3. cc {height: 40px; padding: 5px ;}. box3. tl {left: 0; top: 0 ;}. box3. tr {right: 0; top: 0; background-position: 0-5px ;}. box3. bl {left: 0; bottom: 0; _ bottom:-1px; background-position: 0-10px ;}. box3. br {right: 0; bottom: 0; _ bottom:-1px; background-position: 0-15px ;} </style> </pead> <body> <p> rounded corner 1 </p> <p> rounded corner 2 </p> </p> <p> rounded corner 3 </p> for more code, visit the script home </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]