Advanced Search

CSS Rounded corner work in all browsers without images and javascript

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Code HTML :
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <link rel="Stylesheet" media="screen" type="text/css" href="css/style.css" />
  8. <title>Rounded Corner Without image Work in all Browsers</title>
  9. </head>
  10. <body>
  11.  
  12. <!-- Rounded Corner -->
  13. <div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  14.   <div align="center">
  15.     <h1>Rounded Corner Without image Work in ie 6 </h1>
  16.   </div>
  17.   <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
  18. <!-- Rounded Corner -->
  19.  
  20. </body>
  21. </html>
  22.  
  23. Code CSS : 
  24.  
  25. div.RoundedCorner {
  26. 	background: #6c18cb
  27. }
  28. b.rtop, b.rbottom {
  29. 	display:block;
  30. 	background: #fff
  31. }
  32. b.rtop b, b.rbottom b {
  33. 	display:block;
  34. 	height: 1px;
  35. 	overflow: hidden;
  36. 	background: #6c18cb
  37. }
  38. b.r1 {
  39. 	margin: 0 5px
  40. }
  41. b.r2 {
  42. 	margin: 0 3px
  43. }
  44. b.r3 {
  45. 	margin: 0 2px
  46. }
  47. b.rtop b.r4, b.rbottom b.r4 {
  48. 	margin: 0 1px;
  49. 	height: 2px
  50. }
  51. div.RoundedCorner h1
  52. {
  53. 	font-family:Tahoma, Geneva, sans-serif;
  54. 	color:white;
  55. }

URL: http://depotwebdesigner.com/tutorials/cssrounded-corner-all-browsers-without-images-and-javascript.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.