How to get rounded corners in table header

Getting round corners in Joomla is nothing short of a monumental task, in time, research and implementation. Using .css and no images is possible but requires a lot of work both in coding and Photoshop.

This method allows you to do this task quickly and easily.

1. Make a rounded header image in Photoshop, use the rounded corner tool. Make it 160 pixel wide and 20 high, for my template anyways.

  2. Save image in the C:\Program Files\JSAS\http_root\www\yoursite\templates\yourtemplate\images

The code to use to make this is:

 table.moduletable-sept {
 width: 100%;
 margin-bottom: 5px;
 padding: 0px;
 border-spacing: 0px;
        border-collapse: collapse;
border-bottom: 1px solid #C0C0C0;
         
}

table.moduletable-sept th {
 

background-image: url(../images/grey.gif) ;
background-repeat: no-repeat;
background-position:
center;  

        
color: black;
 text-align: left;
 padding-top: 4px;
 padding-left: 18px;
 height: 21px;
 font-weight: bold;
 font-size: 12px;
        border-bottom: medium solid #3879A7

      
 
}

table.moduletable-sept td {
 font-size: 11px;
 padding: 0px;
 margin: 0px;
 font-weight: normal;
border-collapse: collapse;
border-spacing: 0px;
border-left: 0.03em solid #E7E7E7;
border-right: 0.03em solid  #E7E7E7;

Notice that the left and right border of the table data have changed from #C0C0C0 to #E7E7E7 - this is because the initial color looked to wide, making it lighter blends with the them of the website better, thin borders.

      
 
}