Advanced Search

CSS XHTML Rounded Corners

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

Expand | Embed | Plain Text

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. </style>
  59.  
  60. <div class="searchChallenges fourway white">
  61. 	<div class="fourway-wrap">
  62. 	<div class="fourway-rightbar">
  63. 	<div class="fourway-header">
  64. 	<div class="fourway-footer">
  65. 	<div class="upperleft">
  66. 	<div class="upperright">
  67. 	<div class="lowerleft">
  68. 	<div class="lowerright">
  69.  
  70. 		<div class="fourway-content">
  71. 			<h3>Content Here</h3>
  72. 		</div>
  73.  
  74. 	</div></div></div></div></div></div></div></div>
  75.  
  76. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.