CSS XHTML Rounded Corners


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



Copy this code and paste it in your HTML
  1. <style type="text/css">
  2. /* --- build in a site using yui reset.css --- */
  3. /* --- a series of divs that can be used to create expandable corners w/gradiant backgrounds --- */
  4. .fourway-wrap {
  5. background-position: left top;
  6. background-repeat: repeat-y;
  7. }
  8. .fourway-wrap .fourway-rightbar {
  9. background-position: right top;
  10. background-repeat: repeat-y;
  11.  
  12. }
  13. .fourway-wrap .fourway-header {
  14. background-position: left top;
  15. background-repeat: repeat-x;
  16. }
  17. .fourway-wrap .fourway-content {}
  18. .fourway-wrap .fourway-footer {
  19. background-position: left bottom;
  20. background-repeat: repeat-x;
  21. }
  22. .fourway-wrap .upperleft {
  23. background-position: top left;
  24. background-repeat: no-repeat;
  25. }
  26. .fourway-wrap .upperright {
  27. background-position: top right;
  28. background-repeat: no-repeat;
  29. }
  30. .fourway-wrap .lowerleft {
  31. background-position: left bottom;
  32. background-repeat: no-repeat;
  33. }
  34. .fourway-wrap .lowerright {
  35. background-position: right bottom;
  36. background-repeat: no-repeat;
  37. }
  38.  
  39.  
  40. /* --- fourway colors ---- */
  41.  
  42. .white .fourway-wrap {
  43. background-color: #fff;
  44. background-image: url('img/body.gif');
  45. }
  46. .white .fourway-content {
  47. padding: .5em;
  48.  
  49. }
  50. .white .fourway-rightbar { background-image: url('img/borderRight.gif'); }
  51. .white .fourway-header { background-image: url('img/header.gif'); }
  52. .white .fourway-footer { background-image: url('img/footer.gif'); }
  53. .white .upperleft { background-image: url('img/UpperLeft.gif'); }
  54. .white .upperright { background-image: url('img/UpperRight.gif'); }
  55. .white .lowerleft { background-image: url('img/LowerLeft.gif'); }
  56. .white .lowerright { background-image: url('img/LowerRight.gif'); }
  57.  
  58.  
  59. <div class="searchChallenges fourway white">
  60. <div class="fourway-wrap">
  61. <div class="fourway-rightbar">
  62. <div class="fourway-header">
  63. <div class="fourway-footer">
  64. <div class="upperleft">
  65. <div class="upperright">
  66. <div class="lowerleft">
  67. <div class="lowerright">
  68.  
  69. <div class="fourway-content">
  70. <h3>Content Here</h3>
  71. </div>
  72.  
  73. </div></div></div></div></div></div></div></div>
  74.  
  75. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.