Posted By

ArbaouiMehdi on 04/05/11


Tagged

css xhtml


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jillella


CSS Rounded corner work in all browsers without images and javascript


 / Published in: XHTML
 

URL: http://depotwebdesigner.com/tutorials/cssrounded-corner-all-browsers-without-images-and-javascript.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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <link rel="Stylesheet" media="screen" type="text/css" href="css/style.css" />
  7. <title>Rounded Corner Without image Work in all Browsers</title>
  8. </head>
  9.  
  10. <!-- Rounded Corner -->
  11. <div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  12. <div align="center">
  13. <h1>Rounded Corner Without image Work in ie 6 </h1>
  14. </div>
  15. <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
  16. <!-- Rounded Corner -->
  17.  
  18. </body>
  19. </html>
  20.  
  21. Code CSS :
  22.  
  23. div.RoundedCorner {
  24. background: #6c18cb
  25. }
  26. b.rtop, b.rbottom {
  27. display:block;
  28. background: #fff
  29. }
  30. b.rtop b, b.rbottom b {
  31. display:block;
  32. height: 1px;
  33. overflow: hidden;
  34. background: #6c18cb
  35. }
  36. b.r1 {
  37. margin: 0 5px
  38. }
  39. b.r2 {
  40. margin: 0 3px
  41. }
  42. b.r3 {
  43. margin: 0 2px
  44. }
  45. b.rtop b.r4, b.rbottom b.r4 {
  46. margin: 0 1px;
  47. height: 2px
  48. }
  49. div.RoundedCorner h1
  50. {
  51. font-family:Tahoma, Geneva, sans-serif;
  52. color:white;
  53. }

Report this snippet  

You need to login to post a comment.