Advanced Search

CSS Rounded borders without images

/ Published in: HTML
Save to your folder(s)
Rounded borders without images

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title>纯CSS制作的圆角边框</title>
  5.     <style type="text/css">
  6.             body
  7.             {
  8.                 font-size:12px;
  9.             }
  10.             #xsnazzy h1, #xsnazzy h2, #xsnazzy p 
  11.             {
  12.                 margin:0 10px; 
  13.                 letter-spacing:1px;
  14.             }
  15.             #xsnazzy h1 
  16.             {
  17.                 font-size:2.5em; 
  18.                 color:#06a;
  19.             }
  20.             #xsnazzy h2 
  21.             {
  22.                 font-size:2em;
  23.                 color:#06a; 
  24.                 border:0;
  25.             }
  26.             #xsnazzy p 
  27.             {
  28.                 padding-bottom:0.5em;
  29.             }
  30.             #xsnazzy h2 
  31.             {
  32.                 padding-top:0.5em;
  33.             }
  34.             #xsnazzy 
  35.             {
  36.                 background: transparent; 
  37.                 margin:1em;
  38.             }
  39.  
  40.             .xtop, .xbottom 
  41.             {
  42.                 display:block; 
  43.                 background:transparent; 
  44.                 font-size:2px;
  45.             }
  46.             .xb1, .xb2, .xb3, .xb4 
  47.             {
  48.                 display:block; 
  49.                 overflow:hidden;
  50.             }
  51.             .xb1, .xb2, .xb3 
  52.             {
  53.                 height:1px;
  54.             }
  55.             .xb2, .xb3, .xb4 
  56.             {
  57.                 background:#fff; 
  58.                 border-left:1px solid #08c; 
  59.                 border-right:1px solid #08c;
  60.             }
  61.  
  62.             .xb1 {margin:0 5px; background:#08c;}
  63.             .xb2 {margin:0 3px; border-width:0 2px;}
  64.             .xb3 {margin:0 2px;}
  65.             .xb4 {height:2px; margin:0 1px;}
  66.  
  67.             .xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;}
  68.  
  69.         </style>
  70. </head>
  71. <body>
  72.     <div id="xsnazzy">
  73.         <b class="xtop">
  74.             <b class="xb1" ></b>
  75.             <b class="xb2"></b>
  76.             <b class="xb3"></b>
  77.             <b class="xb4"></b>
  78.         </b>
  79.         <div class="xboxcontent">
  80.             <h1>
  81.                 Snazzy Borders</h1>
  82.             <p>
  83.                 Based on Nifty Corners By Alessandro Fulciniti<br />
  84.                 http://pro.html.it/esempio/nifty/</p>
  85.             <h2>
  86.                 Rounded borders without images</h2>
  87.             <p>
  88.                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  89.                 euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
  90.                 minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  91.                 ex ea commodo consequat.</p>
  92.             <p>
  93.                 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
  94.                 vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  95.                 dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
  96.                 nulla facilisi.</p>
  97.         </div>
  98.  
  99.         <b class="xbottom">
  100.             <b class="xb4"></b>
  101.             <b class="xb3"></b>
  102.             <b class="xb2"></b>
  103.             <b class="xb1"></b>
  104.         </b>
  105.     </div>
  106. </body>
  107. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.