Effective rounded corners using CSS


Rounded corners theme and buttons are essentially important for today's era, a Web 2.0. For a while, i have been researching the most effective way to achieve rounded corners, a few techniques are using 4 rounded tiny images to cover each corner. Meanwhile, there are other methods purely by CSS account, after a few tight selections my choice would befall on the Spiffy Box. I have used it myself on several websites, it turned out well and cross browsers compatible in IE, Firefox, Chrome, Safari, and Opera.

On the Spiffy Box site, there are 4 step by step approaches explained by the following:

1. Choose your preferred width, height, corner radius, foreground and background color, etcetra.
2. The site will automatically generate the image and what you have to do is save the picture.
3. Copy and paste the css modification below to your external .css file.

  1. /* set the image to use and establish the lower-right position */
  2. .cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
  3. background: transparent url(yourimage.png) no-repeat bottom right}
  4.  
  5. .cssbox{     
  6. /* intended total box width - padding-right(next) */       
  7. width:335px !important; /* IE Win = width - padding */       
  8. width: 320px;      
  9. /* the gap on the right edge of the image (not content padding) */       
  10. padding-right:15px; /* use to position the box */       
  11. margin:20px auto}      
  12.  
  13. /* set the top-right image */    
  14. .cssbox_head{
  15. background-position:top right;     
  16. /* pull the right image over on top of border */       
  17. margin-right:-15px;
  18. /* right-image-gap + right-inside padding */      
  19. padding-right:40px}      
  20.  
  21. /* set the top-left image */    
  22. .cssbox_head h2{      
  23. background-position:top left;      
  24. margin:0; /* reset main site styles*/      
  25. border:0; /* ditto */ 
  26. /* padding-left = image gap + interior padding ... no padding-right */      
  27. padding:25px 0 15px 40px; 
  28. height:auto !important;
  29. height:1%} /* IE Holly Hack */     
  30.  
  31. /* set the lower-left corner image */   
  32. .cssbox_body{       
  33. background-position:bottom left;       
  34. margin-right:25px; /* interior-padding right */        
  35. padding:15px 0 15px 40px} /* mirror .cssbox_head right/left */

4. Copy and paste the html code below to your .html / .php / .asp / .jsp file.

  1.      <div class="cssbox">
  2.       <div class="cssbox_head">
  3.        <h2>This is a header</h2>
  4.       </div>
  5.       <div class="cssbox_body">
  6.        <p>This is for your content.</p>
  7.       </div>
  8.      </div>



Posted by eangkasa | 09/10/2009 Bookmark and Share