CSS Rounded borders without images


/ Published in: HTML
Save to your folder(s)

Rounded borders without images


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. <div id="xsnazzy">
  72. <b class="xtop">
  73. <b class="xb1" ></b>
  74. <b class="xb2"></b>
  75. <b class="xb3"></b>
  76. <b class="xb4"></b>
  77. </b>
  78. <div class="xboxcontent">
  79. <h1>
  80. Snazzy Borders</h1>
  81. <p>
  82. Based on Nifty Corners By Alessandro Fulciniti<br />
  83. http://pro.html.it/esempio/nifty/</p>
  84. <h2>
  85. Rounded borders without images</h2>
  86. <p>
  87. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  88. euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
  89. minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  90. ex ea commodo consequat.</p>
  91. <p>
  92. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
  93. vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  94. dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
  95. nulla facilisi.</p>
  96. </div>
  97.  
  98. <b class="xbottom">
  99. <b class="xb4"></b>
  100. <b class="xb3"></b>
  101. <b class="xb2"></b>
  102. <b class="xb1"></b>
  103. </b>
  104. </div>
  105. </body>
  106. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.